十个不被IE6支持的实用CSS属性

开发 前端
本文向大家描述一下IE6不支持的十个实用的CSS属性,IE6对一些非常有用的CSS属性完全不支持。比如mini-width,无人不抱怨IE6的CSS兼容性问题。

你对IE6不支持的十个实用的CSS属性是否了解,这里列出这些属性并不是为了数落IE,而是你了解了哪些CSS属性是IE不支持的,就更有针对性的去编写CSS和Hack了。

IE6不支持的十个实用的CSS属性

  IE6对一些非常有用的CSS属性完全不支持。比如mini-width,无人不抱怨IE6的CSS兼容性问题。本文里面,介绍了10个很实但IE却不支持的CSS属性,列出这些属性并不是为了数落IE(数落也没用),而是你了解了哪些CSS属性是IE不支持的,就更有针对性的去编写CSS和Hack了。

一、Outline

  在调试CSS问题的时候,我常常在指定元素上添加border来精确的查看该元素会发生什么并帮助确定问题的来源。这常常是有效的,因为它可以在布局上给我更加具体的可视性。但是如果是块级元素,这可能会发生某些错误——在任何块级元素上添加1px的边框很可能会影响到布局,它会让这个元素的宽度额外增加2px。
  outline属性是***的替代者,因为它可以在不影响文档流的情况下呈现该对象。但是IE6和IE7不支持outline属性,所以,它不能在这两个浏览器中用于调试。

二、Inherit(值)

  在CSS开发中有很多这样的例子:通过在特定元素上设置某些样式来告诉该元素来“继承”它父级元素的所有已添加的属性,这样你就可以避免相当多的键盘输入。
  这可以通过设置inherit来很容易的实现。这可能很有用。比如,当重写background属性的时候,常常会有很多的文字在该属性中(色彩、图片的URL地址、位置等)。所以,与其重新写这些值,你可能仅仅想要考虑中的元素和其父级元素有相同的背景属性,一个inherit值就可以搞定一切——这显然大大的节省了键盘输入。
  不幸的是,inherit值在IE6和IE7不被支持(除了用于direction(文字方向)和visibility属性)。
  某人说,代码就像女人的裙子——越短越好,看来IE会阻碍我们这个愿望的实现。

三、Empty-Cells

  该属性只用于table或者”display”属性被设置为”table-cell”的元素。如果你动态的为一个table添加内容,就可能会遇到某个单元格的内容为空的情况,然后你又不希望这个空的单元格的边框、背景色、背景图片等隐藏掉。
  使用”empty-cells:hide”就能解决这个问题,它会将可能出现这种情况的单元格完全隐藏掉。
  InternetExplorer不支持empty-cells属性。

四、Caption-Side

  说到table的属性,这个属性用于声明显示在表格的侧栏的表格标题。它接受top、bottom、left和right四个值。InternetExporer不支持这个属性,table的标题在IE6和IE7中将总是出现在表格的顶部。

五、Counter-Increment/Counter-Reset

  有序列表(<ol>)非常方便,因为它可以省去你手工添加递增数字的麻烦,而且它允许你不用更改数字就能改变列表的序列。
  CSS拥有counter-increment和counter-reset属性,它允许你用来自动生成递增数字到几乎所有的HTML元素上,就像有序列表的效果一样。
  这里有个示例:

  1. ExampleSourceCode[www.div-CSS.net]  
  2. h2{counter-increment:headers;}  
  3. h2:before{content:counter(headers)".";}  
  4.  

  上面的样式将在所有的<h2>标签前面自动添加递增的数字,而且允许你在h2标签上实现和li标签同样的的效果。
  但是IE6,IE7甚至Safari(直到3.x版本)还不支持这些属性。当然,IE6也不支持:before伪元素。

六、Min-Height

  有时,一个网站的设计或布局结构需要一个有固定高度的内容区域,否则特定的视觉效果就会丢掉。这可能会因为一个渐变背景、一个独特的下拉列表、或者可能是因为PS出来的很酷的发光效果。但是有的时候,页面中的内容会比较多,而页面却不能像预期那样展开。

  这个时候就需要用到min-height属性了,因为它可以告诉浏览器在一个特定的块级元素上渲染最小的高度,不管内容的实际高度是否达到了这个最小高度。然后呢,如果内容超出了最小高度,该元素就会适度的扩展开。

  使用min-height唯一需要注意到的是它在IE6中不被支持。我们都知道IE6在(缓慢的)退出历史舞台,但是有的客户可能仍然要求他们的网站支持这个该死的浏览器。
  不过令人高兴的是,IE6渲染height的值的方法正好和其它浏览器渲染“min-height”的方式一样,所以你只需要一个针对IE6的hack或独立的样式表来为该元素添加特定的height,这个问题就解决了。
  IE6同样无视min-width、max-height和max-width,但是上述方法在这些属性上也是可行的。

七、:hover

  从技术上来说,:hover只是一个伪类,但是它在IE6中不被支持(IE7和IE8支持)。:hover伪类允许你在元素上添加任何的鼠标经过样式。这非常有用,可以避免(至少在某种程度上)使用JavaScript。
  但是如果你的网站,需要完全支持IE6,特别是在中国这种IE6一手遮天的情况下,那么你就必须考虑取消使用这个伪类,除非相关的标签有个”href”属性,比如<a>标签。而且如果要实现这种效果,可能必须借助于javascript和额外的样式。

八、Display

  Display通常被设置为这三个值中的一个:block、inline和none。“得益于”IE,Display的其它值很少被用到。这些值包括inline-block、table、inline-table和table-cell等,这些属性对于解决一些特殊的布局问题时,是很有用的。
  所以,尽管IE确实支持Display的这三个基本属性,但是它基本上不支持其它属性。
  其实,IE8对display的属性支持已经相当完整了。不过,对于inline-block属性,IE6/7只支持本身为inline的元素。

九.Clip

  这是一个在特殊情况下能派上用场的很有趣的CSS属性。它可能和不可预知的、动态生成的内容结合起来。简单来说,这个属性允许你在一个特定的元素上指定隐藏区域——也可以理解为,在一个绝对定位的元素中,按照一定的设置来裁剪该元素的显示区域,超出该区域的内容会被隐藏掉。语法看起来像这样的:

  1. ExampleSourceCode[www.div-CSS.net]  
  2. div.clipped{  
  3. padding:20px;  
  4. width:400px;  
  5. height:400px;  
  6. clip:rect(20px,300px,200px,100px);  
  7. position:absolute;  
  8. }  
  9.  

  修剪只能用于一个绝对定位的元素,而且只用使用矩形区域。括号内的数字划出的区域(200px*180px大小)为可见区域,该区域以外的内容不可见或者被剪切掉。
  技术上来讲,clip属性被IE支持,但是只支持无逗号的语法,比如

  1. ExampleSourceCode[www.div-CSS.net]  
  2. div.clipped{  
  3. padding:20px;  
  4. width:400px;  
  5. height:400px;  
  6. clip:rect(20px300px200px100px);  
  7. position:absolute;  
  8. }  
  9.  

  上面的样式(rect后面括号里的属性没有用逗号隔开)在大多数浏览器下都可运行,但是可能不会通过CSS验证,因为语句没有用逗号隔开。

十、:focus

  这是另外一个伪类需要在这里被提及的,因为所有的非IE浏览器,都支持这个属性。:focus伪类允许你声明一个特别的样式,当一个页面元素成为键盘(鼠标)焦点的时候,将该样式动态的应用到该元素上。这在表单元素上非常有用,因为你可以在一个输入框被选中的时候给它添加一个边框。
  下面的样式将在输入框成为键盘焦点的时候添加一个红色的边框:

  1. ExampleSourceCode[www.div-CSS.net]  
  2. input:focus{  
  3. border:1pxsolid#f00;  
  4. }  
  5.  

文章来源:Div-CSS.net设计网参考:http://www.div-CSS.net/div_CSS/topic/index.asp?id=6840

【编辑推荐】

  1. IE8与IE7实现共存的两种方法揭秘
  2. 实现IE6、IE7、Firefox兼容的两种方案
  3. JavaScript巧解IE6至IE8兼容问题
  4. 深入探究IE8和IE7的24个区别
  5. 使用X-UA-Compatible来设置IE8兼容模式
责任编辑:佚名 来源: div-CSS.net
相关推荐

2010-08-27 16:07:50

2010-08-19 09:37:35

IE6fixed

2010-09-01 13:08:42

2010-09-06 15:35:27

2009-09-18 16:15:25

CSS样式属性

2010-08-18 09:55:38

IE6

2010-09-06 15:06:29

IE6IE7Firefox

2010-08-18 16:34:53

IE6CSS

2009-08-13 10:12:07

IE的CSS Bug

2010-08-23 15:07:28

IE6CSS

2010-08-18 10:24:51

IE6IE7IE8

2024-01-07 20:14:18

CSS开发工具

2010-09-16 13:17:31

IE6IE7IE8

2010-09-16 10:50:55

CSS兼容IE6

2009-08-14 09:20:40

抵制IE6

2010-08-27 15:08:10

FirefoxIE6IE7

2010-08-18 10:37:16

IE6IE7IE8

2010-09-15 11:08:48

CSSIE6IE7

2010-08-27 15:38:21

兼容IE6IE7

2010-08-26 08:55:08

IE6CSS兼容性
点赞
收藏

51CTO技术栈公众号