遇到的兼容性bug

最新推荐文章于 2025-04-05 19:45:20 发布

weixin_30545285

最新推荐文章于 2025-04-05 19:45:20 发布

阅读量146

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yang-shun/p/7278228.html

本文针对IE6至IE9浏览器的兼容性问题，提供了详细的解决方案，包括层级显示、input元素样式调整、半透明效果实现等。适用于前端开发者在维护老旧浏览器兼容性时参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.（IE6）：ie6环境下，通过设置z-index：999；无效果；

原因：IE6下，决定层级高低的不是当前的父标签，而是整个DOM tree（节点树）的第一个relative属性的父标签。

解决办法：找到DOMtree里面所有设置了relative属性的父标签，依次递增设置z-index；

2.（IE6）：ie6环境下，input输入款光标上下不居中；

解决办法：给input一个小一点的height，然后用padding上下补白控制input的高度大小；

3.（IE8）：input text 里面用text-indent失效；

解决办法，将text-indent：30px；换成padding-left：30px；

4.（IE8/IE9）：placeholder是css3属性，不支持；

解决办法：使用js设置value值；

<input type="text" onblur="if (this.value == '') {this.value = 'Search';}" onfocus="if (this.value == 'Search') {this.value = '';}" value="Search" >

5.placeholder更改颜色：

需要考虑各种浏览器兼容性；

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #636363;
}
input:-moz-placeholder, textarea:-moz-placeholder {
  color: #636363;
}

6.（IE8）：半透明部分设置样式：opacity:0.7在ie9/ie10/ff/chrome/opera/safari显示正常，是图上的效果。但是这样在ie6-ie8中是不支持的，需要加上下面这句话：

解决办法：

filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);

转载于:https://www.cnblogs.com/yang-shun/p/7278228.html