CSS 不兼容问题有哪些? 下面本篇文章给大家介绍一下常见的 CSS 兼容性问题和解决方法. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
CSS 常见不兼容问题
1, 双倍浮动 BUG:
描述: 块状元素设置了 float 属性后, 又设置了横向的 margin 值, 在 IE6 下显示的 margin 值要比设置的值大;
解决方案: 给 float 的元素添加 display:inline; 将其转换为内联元素;
2, 表单元素行高不一致:
解决方案:
1, 给表单元素添加 vertical-align:middle;
2, 给表单元素添加 float:left;
3,IE6(默认 16px 为最小) 不识别较小高度的标签 (一般为 10px):
解决方案:
1, 给标签添加 overflow:hidden;
2, 给标签添加 font-size:0;
4, 图片添加超链接时, 在 IE 浏览器中会有蓝色的边框:
解决方案:
给图片添加 border:0 或者 border:none;
5, 最小高度 min-height 不兼容 IE6;
解决方案:
- ,min-height:100px;_height:100px;
- ,min-height:100px;height:auto!important;height:100px;
6, 图片默认有间隙:
解决方案:
1, 给 img 添加 float 属性;
2, 给 img 添加 display:block;
7, 按钮默认大小不一:
解决方案:
1, 如果按钮是一张图片, 直接用背景图作为按钮图片;
2, 用 a 标记模拟按钮, 使用 JS 实现其他功能;
8, 百分比 BUG:
描述: 父元素设置 100%, 子元素各 50%, 在 IE6 下, 50% 50% 大于 100%;
解决方案:
给右边的浮动元素添加 clear:right;
9, 鼠标指针 BUG:
cursor:hand 只有 IE 浏览器识别;
cursor:pointer;IE 及以上浏览器和其他浏览器都识别 (手型);
10, 透明度设置, IE 不识别 opacity 属性:
解决方案:
标准写法: opacity:value;(取值范围 0-1);
兼容 IE 浏览器 filter:alpha(opacity=value);(取值范围 1-100);
11, 上下 margin 重叠问题:
描述: 给上面的元素设置 margin-bottom, 给下面的元素设置 margin-top, 只能识别其中较大的那个值;
解决方案:
1,margin-top 和 margin-bottom 只设置其中一个值;
2, 给其中一个元素再包裹一个盒子, 并设置 over-flow:hidden;
12, 给子元素设置 margin-top. 应用在了父元素上:
解决方案:
1,border-top:1px solid transparent;
3, 给父元素设置 over-flow:hidden;
4, 给父元素设置 float:left;
更多 web 开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/css3/17035.html