placeholder
IE8下不支持HTML5属性placeholder,不过为解决此问题的js插件挺多的,比如:。也可以使用jquery来写。
last-child
first-child是CSS2的内容,但是last-child就不是了,所以IE8不买账。推荐的做法不是使用last-child,而是给最后一个元素设置一个.last
的class,然后对此进行样式设置,这样就全部兼容了。
关于max-width
还有一个在IE8中经常遇到的问题就是max-width,网页中图片的尺寸可能比较宽,我会给它设置max-width: 100%
来限制其宽度最大为父容器的宽度,但是有时候却不奏效,慢慢摸索才得知IE解析max-width所遵循的规则:严格要求直接父元素的宽度是固定的。经实验发现Chrome所遵守的规则比IE松一些,所以这个问题应该不归属为IE兼容性问题,不过我还是提一下吧。分享两个我遇到的场景:
(1)td中的max-width
如果针对td中的img元素设置max-width: 100%
,在IE和Firefox你会发现不奏效,而在Chrome中却是可以的。经查询发现需要给table设置table-layout: fixed
,对此属性的具体解释见。
(2)嵌套标签中的max-width
如下的HTML结构:
最外层元素.work-item
设置了固定宽度,但是对img设置max-width为100%却无效,后来才发现需要再对a标签设置width: 100%
,这样才能使最内层的img标签充满整个div。
实现CSS3的某些特性
IE8不支持CSS3的很多新特性,不过我们可以使用一些比较成熟的hack方法,我采用的是,它支持的特性有这些:border-radius、box-shadow、border-image、multiple background images、linear-gradient等。
IE8下input[button | submit] 设置margin:auto无法居中bug
发生场合:ie8下,如果给像button这样的标签(如button input[type="button"] input[type="submit"])设置{ display: block; margin:0 auto; }如果不设置宽度的话无法居中。
解决方法:可以给为input加上宽度
原理分析:IE8浏览器Bug
IE8百分比padding垂直margin bug:
发生场合:当父元素设置了百分比的padding,子元素有垂直的margin的时候,就好像父元素被设置了margin一样。
解决方法:给父元素加一个overflow:hidden/auto。
原理分析:IE8浏览器Bug