CSS中存在的兼容问题
1.网页中插入图片会出现的问题:
向下撑大三像素
解决方法:(1)将结束标签例如</div>
与img在同一排显示(只有IE6支持)
(2)将图片变成块状 display:block
(3)利用图片垂直方向对齐方式 vertical-align:top/middle/bottom
(4)给图片写浮动 float:left/right;
(5)给父元素设置 font-size:0;
如果图片是通过超链接加载的那么在IE浏览器中会出现边框
解决方法:将图片的边框设置为border:0/none;
2.双边距的问题(IE6的兼容问题)
解决方法:给float的元素添加display:inline;
3.百分比问题(IE6的兼容问题)
只有width的值为50%时才会出现
解决方法:给浮动到右边的元素添加clear:right;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0; padding: 0;}
.left{width: 50%; height: 100px; float: left; background: #f00; cursor:wait; _background:#999;*background:#000; background: #00f\9;}
.right{width: 50%; height: 100px; float: left; background: #ff0; clear: right;}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
4.鼠标指针
cursor:pointer(鼠标变成小手型)
5.表单行高不一致
解决方法:给input写float属性;
6.按钮大小不一致
解决方法:
(1)给按钮单独设置高度
(2)用其他标签代替按钮
(3)给按钮外部嵌套一个其他标签
(4)用背景图片代替
7.透明
opacity:value;
filter:alpha(opacity=value)
过滤器
下划线写法 例如:_height(IE6支持)
星号写法 例如:*height(IE6 IE7支持)
反斜杠9 例如:height:100px\9;