偶然遇见一个奇怪的嵌套Flex问题，当子Flex元素里面的内容宽度过大时，即使指定了overflow:auto，仍然会撑开父元素，导致布局乱掉。一个简单的示例如下：
HTML如下：
By <div class="main"<div class="left"Sidebar</div<div class="right"<div class="label"Label
</div<div class="overflow"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div</div</divCSS如下：
.main {
display: flex;
width: 100%;
}
.left 自定义字体是个好东西啊，FontAwesome/Remixicon等优秀的图标都是用自定义字体来实现的，非常省事好用。如此让人上瘾的东西，可惜碰到了web components之后麻烦就来了。
首先，web components是自隔离的，父页面中的样式是不能作用于组件的，所以按照常规方法是把样式嵌入到组件中。非常遗憾的是，css加载是没问题的，但是它并没有于我们预期想象的一样把图标显示出来。
这个看起来就像是字体缺失，打开网路请求检查一下，的确就是没有字体请求！但是，令人意外的是，如果在父页面中引入自定义字体，在组件内部使用自定义字体，居然是行得通的！
所以这个丑陋的方案就出来了，把他们拆成两个部分：
当然，我们可以通过js来在父页面中注入自定义字体：
const FONT_FACES = `@font-face我是Sam，Spot的一位软件工程师，也是Emotion库第二活跃的维护者。Emotion是一个在React项目中被广泛使用的CSS-in-JS库。这篇文章将深入探究最初吸引我使用CSS-in-JS的原因，以及为什么我（及Spot团队的其他成员）又决定放弃它。
我们将从CSS-in-JS的概述开始，并简要介绍一下它的优缺点。然后，我们再深入探究在CSS-in-JS在Spot上引发的性能问题，以及如何避免它。
顾名思义，CSS-in-JS允许你直接在JavaScript或TypeScript中写入CSS来设置你的React组件样式：
// @emotion/react (css prop), with object styles
function ErrorMessage({ children }) {
return (
<div
css={{
color: 'red',
fontWeight: 'bold',我们网站的静态资源（css、js和背景图片）和web应用程序是分开部署的，几乎所有的静态资源都部署在同一个应用下。最开始的网站很简单，对所有的静态资源都进行了gzip，包括所有的css，js，图片，flash等等，也一直相安无事。
直到……直到有一天用了png做背景图片，并且上传到服务器进行部署，发现在很多IE6都会在这个页面卡死，无法动弹，出事的几率非常的高。但是在内网部署的没有任何问题，那问题就只能比较内网和公网的服务器环境了。观察HTTP请求头部是个不错的方法，很快锁定是由于gzip的png引起的。内网服务器加上gzip测试，果然如此。
其实对图片等文件进行gzip是完全没有必要的，原因很简单：在web里面用作背景的图片99%以上都是gif或者jpg或者png，这些格式本来就是压缩过的，再用gzip对他们进行压缩只是徒增服务器负担而已。…
很早以前就说过，IE8的标准模式已经不再支持滤镜了，不过IE仍然留了一条后路，你可以在CSS中这样写滤镜：
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=50)";
当非常遗憾的是，这个属性只有IE8能认识，如果要兼容IE6还有IE7，你必须在这一行的后面继续加上以前的滤镜代码：
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=50)";
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
注意：这个先后顺序非常重要！这会影响到IE8兼容模式下的显示效果。
官方blog（IE Blog）的关于在IE8中使用滤镜原文在这里。
另外，这里还有IE8的私有CSS属性列表…
原文地址：Ending Expressions
标准遵守情况、性能、可靠性和安全性等设计标准构成了IE8的设计整体，包括新的和已经存在功能特性。最终，IE8的标准模式不再支持CSS表达式（CSS Expression）。这个变化在以前就曾经在IE blog上公布过，这篇文章将提供关于这个决定的更详细的一些信息。下面的FAQ（常见问题）将给您一个快速的总览：包括它的功能特性、我们设计决定的背后原因以及这对你的网站有什么影响。
什么是CSS表达式？
它也被称为“动态属性”，这个特有的CSS扩展是在IE5中引入的。远远在jQuery和Dojo等JavaScript库的诞生之前，它允许web开发者动态地通过CSS选择器来给页面绑定脚本。举一个例子，下面的CSS声明根据一天中的事件来更新页面中某些区块的背景颜色：
div.title { background-color:… 先说句题外话，昨天Silverlight 2.0发布了RTW（很多人都以为是RTM，这里的RTW是针对互联网版本的一个说法：Release to Web）版本。今天一大早的打开Google Reader，发现Flash Player 10和Flash CS4的文档已经发布了，中午吃完饭回来惊奇地发现Flash Player 10也跟着发布了。Flash Player和Silverlight的竞争是越来越白热化了，至少在新版本的发布上已经有这个意思了。
===========严肃的分割线============
好了，言归正传，回到我们的标题上来。UL的预设标记就是每个项目之前的那个原点或者方块或者数字之类的标记，就像我的blog侧栏里面“最新评论”或者“最新文章”那个地方的小原点一样。
很多时候，很多人不喜欢这个玩意儿，于是就想把它藏起来，这个也很好办，这么一行就搞定了：
ul{
list-style-type:none;… 这个是用来设置被选择文字的背景色和文字颜色（就是文字高亮时的样子），例如：
Chrome支持::selection，Firefox是支持::-moz-selection，IE就啥都不支持了，不过这两个样式要分开写，像这样：
::selection{
color:#f0d000;
background-color:#0f581a;
}
::-moz-selection{
color:#f0d000;
background-color:#0f581a;
}
…
有个页面，写CSS测试时本地没有任何问题，上线后，不少人说用IE 7打开那个页面会Crash，用其他浏览器正常。系统多是Windows XP加上Internet Explorer 7，其中部分IE7是绿色版的（比如我的），还有部分装了Visual Studio。
最开始以为是javascript的问题，一个一个删除被怀疑的javascript代码，直到最后完全没有javascript代码，发现IE 7还是会Crash掉。再去掉CSS代码，发现居然好了，很稳定，怎么试都不出问题了。
开始逐步排查CSS代码，最开始还怀疑是PNG图片用了滤镜的问题，最后才发现不是这个问题，而是这样一行代码有问题：
.slide_indexwind .focus{width:402px;height:182px;overflow:hidden;}
第一次，把focus的名字改了一下，打开，好了，于是以为问题解决了。
过了不久，又有人报还是会Crash，于是直接把这一行删掉，好了，怎么刷也没有问题了，实在是不明白为什么？有没有人碰到过类似的问题呢？…
很简单的，嗯，就是要做成这样的：
用CSS，当然得用层了，就是在图片上再加一个层，用来放那个按钮，按钮又有两种方式可以放，一种是直接用图片img标签，一种是通过背景图片放上去。这里我们就用背景图片这个方式来做吧！
首先准备这样两张图片：
宽19px，高32px
宽120px，高90px
我们想想：底部要放图片，上面要放一个按钮，貌似需要用到绝对定位，那我们需要为图片再定义一个div样式，用来放图片和这个按钮，我们可以这样写：
.expdiv{
padding:4px;
width:120px;
border:1px solid #c8c8c8;
}
剩下的就是关键的把按钮放上去，在这里，按钮是一个链接，我们可以设置链接的显示方式为block，并设置其z-index值为2（只要比0大都可以），设置其宽高分别为19px和16px（我们只需要显示按钮图片的一半就可以了），那代码可以这么写：
….expbtn{
position:absolute;