十个非常有用的CSS属性（IE不支持）

有关IE浏览器（尤其是IE6）的投诉已基本陷入瘫痪状态，有时甚至会有非常消极的想法: 即使只有IE6，这个世界上也只有一个浏览器. 当然，这样的想法很病态，将被立即消除. 在本文中，我介绍了IE不支持的10个非常真实的CSS属性. 这些属性的列表不是用来计算IE的（也没有用），但是您知道IE不支持哪些CSS属性，更不用说要针对CSS和Hack编写了.

一个，大纲

在调试CSS问题时，我经常在特定元素上添加边框以确切了解该元素将要发生的情况，并帮助确定问题的根源. 这通常很有效，因为它使我在布局中更具特定的可见性. 但是，如果它是块级元素，则可能会发生一些错误-向任何块级元素添加1px边框可能会影响布局，并且会使该元素的宽度增加2px.

The

outline属性是完美的替代，因为它可以呈现对象而不影响文档流. 但是，IE6和IE7不支持outline属性ie浏览器调试css样式，因此不能在这两个浏览器中用于调试.

第二，继承（值）

在CSS开发中有很多这样的示例: 通过在特定元素上设置某些样式来告诉该元素“继承”其父元素的所有添加属性，因此可以避免大量键盘输入.

通过设置继承可以轻松实现. 这可能很有用. 例如，当重写background属性时，该属性中通常会有很多文本（颜色，图像的URL，位置等）. 因此，不必重写这些值，您可能只希望所考虑的元素与其父元素具有相同的背景属性，并且继承值可以完成所有操作，这显然可以节省大量键盘输入.

不幸的是，IE6和IE7不支持继承值（方向（文本方向）和可见性属性除外）.

有人说代码很像女人的裙子-越短越好，看来IE会阻碍我们实现这一愿望.

三个空单元格

此属性仅用于将table或“ display”属性设置为“ table-cell”的元素. 如果将内容动态添加到表中，则可能会遇到以下情况: 单元格的内容为空，然后不想隐藏此空单元格的边框，背景色，背景图片等.

使用“空单元格: 隐藏”解决此问题，它将完全隐藏在这种情况下可能出现的单元格.

Internet Explorer不支持empty-cells属性.

四个字幕端

就表属性而言，此属性用于声明显示在表的边栏中的表标题. 它接受top，bottom，left和right四个值. Internet Exporer不支持此属性，表格标题将始终显示在IE6和IE7中表格的顶部.

五，反增量/反重置

有序列表（

）非常方便ie浏览器调试css样式，因为它免除了您手动添加增量数字的麻烦，并且允许您更改列表的顺序而无需更改数字.

CSS具有counter-increment和counter-reset属性，使您可以在几乎所有HTML元素上自动生成增量数字，就像有序列表的效果一样.

这里是一个例子:

h2 {计数器增加: 标头；}

h2: 在{content: counter（headers）“. ”;}

之前

以上样式将在所有

标签之前自动添加增量数字，并使您获得与h2标签上的li标签相同的效果.



但是IE6，IE7甚至Safari（直到3.x版）仍不支持这些属性. 当然，IE6不支持: 伪元素之前.

六，最小高度

有时，网站的设计或布局结构需要高度固定的内容区域，否则会丢失某些视觉效果. 这可能是由于渐变背景，唯一的下拉列表，或者是由于PS的冷光效果. 但是有时候，页面上会有更多内容，但是页面无法按预期扩展.

这时，您需要使用min-height属性，因为它可以告诉浏览器在特定块级元素上呈现最小高度，而不管内容的实际高度是否达到此最小高度. 然后，如果内容超出最小高度，则元素将适当扩展.

使用最小高度时要注意的唯一事情是IE6不支持它. 我们都知道IE6（正在缓慢地）退出历史舞台，但是某些客户可能仍然需要其网站来支持该死的浏览器.

但是，IE6呈现高度值的方式与其他浏览器呈现“最小高度”的方式完全相同，因此您只需为IE6 hack或为元素添加单独的样式表添加特定高度，即可解决此问题.

IE6也忽略了最小宽度，最大高度和最大宽度，但是上述方法对于这些属性也是可行的.

VII .:悬停

从技术上讲，: hover只是一个伪类，但IE6不支持（支持IE7和IE8）. : hover伪类允许您将任何鼠标悬停样式添加到元素. 这非常有用，可以（至少在某种程度上）避免使用JavaScript.

但是，如果您的网站需要完全支持IE6，尤其是在IE6覆盖中国的情况下，那么您必须考虑取消使用此伪类，除非相关标记具有“ href”属性，例如标签. 而且，如果您想达到这种效果，则可能必须使用javascript和其他样式.

八，显示

通常将显示设置为以下三个值之一: block，inline和none. ``感谢''IE，很少使用其他Display值. 这些值包括内联块，表，内联表和表单元格. 这些属性对于解决一些特殊的布局问题很有用.



因此，尽管IE确实支持Display的这三个基本属性，但它基本上不支持其他属性.

实际上，IE8完全支持显示属性. 但是，对于inline-block属性，IE6 / 7仅支持本身是内联的元素.

九. 剪辑

这是一个非常有趣的CSS属性，在特殊情况下可以派上用场. 它可能与不可预测的动态生成的内容结合在一起. 简而言之，此属性允许您在特定元素上指定隐藏区域-也可以理解，在绝对定位的元素中，该元素的显示区域是根据某些设置裁剪的，内容超出该区域将被隐藏. 语法如下:

div.clipped {

填充: 20px;

宽度: 400像素；

高度: 400像素；

剪辑: rect（20px，300px，200px，100px）;

位置: 绝对；

}

修剪只能用于绝对定位的元素，并且只能使用矩形区域. 用括号（200px * 180px大小）中的数字表示的区域是可见区域，该区域之外的内容不可见或被切除.



从技术上讲，IE支持clip属性，但仅支持无逗号语法，例如

div.clipped {

填充: 20px;

宽度: 400像素；

高度: 400像素；

剪辑: rect（20px 300px 200px 100px）;

位置: 绝对；

}

上述样式（rect后括号中的属性未用逗号分隔）将在大多数浏览器中正常工作，但由于语句未用逗号分隔，因此可能无法通过CSS验证.

十个: : focus

这是另一个伪类，在这里需要提及，因为所有非IE浏览器都支持此属性. : focus伪类允许您声明特殊样式. 当页面元素成为键盘（鼠标）的焦点时，样式将动态应用于该元素. 这对于表单元素非常有用，因为您可以在选择输入框时为其添加边框.

当输入框成为键盘焦点时，以下样式将添加红色边框:

input: focus {

边框: 1px实线#f00;

}


本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-280330-1.html