博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
IE8下的兼容小经验
阅读量:5082 次
发布时间:2019-06-13

本文共 1248 字,大约阅读时间需要 4 分钟。

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

转载于:https://www.cnblogs.com/xuzhudong/p/6793160.html

你可能感兴趣的文章
一个自己写的判断2个相同对象的属性值差异的工具类
查看>>
oracle连接的三个配置文件(转)
查看>>
Python内置函数(29)——help
查看>>
Android TextView加上阴影效果
查看>>
《梦断代码》读书笔记(三)
查看>>
AngularJS学习篇(一)
查看>>
关于Xshell无法连接centos6.4的问题
查看>>
spring security 11种过滤器介绍
查看>>
代码实现导航栏分割线
查看>>
大数据学习系列(8)-- WordCount+Block+Split+Shuffle+Map+Reduce技术详解
查看>>
Mysql性能调优
查看>>
ES6内置方法find 和 filter的区别在哪
查看>>
Android实现 ScrollView + ListView无滚动条滚动
查看>>
硬件笔记之Thinkpad T470P更换2K屏幕
查看>>
getElement的几中属性介绍
查看>>
HTML列表,表格与媒体元素
查看>>
设计器 和后台代码的转换 快捷键
查看>>
STL容器之vector
查看>>
数据中心虚拟化技术
查看>>
复习文件操作
查看>>