css-兼容性问题及解决(三)

css-兼容性问题及解决(三)

1:在IE6,7下输入类型的表单控件上下各有1px的间隙   

 解决办法:给input加浮动
 
 1  在IE6,7下输入类型的表单控件上下各有1px的间隙   
 2  解决办法:给input加浮动
 3 
 4 <!DOCTYPE HTML>
 5 <html>
 6 <head>
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 8 <title>无标题文档</title>
 9 <style>
10 .box{ width:200px;height:32px;border:1px solid red;}
11 input{width:100px;height:30px;border:1px solid #000;margin:0;padding:0; float:left;}
12 /*
13  在IE6,7下输入类型的表单控件上下各有1px的间隙   
14  解决办法:给input加浮动
15 */
16 </style>
17 </head>
18 <body>
19 <div class="box">
20  <input type="text" />
21 </div>
22 </body>
23 </html>

正常情况下

css-兼容性问题及解决(三)_第1张图片

IE6,7下

css-兼容性问题及解决(三)_第2张图片

 

 

2:在IE6,7下输入类型的表单控件加border:none;无效

 解决办法: 重置input的背景
 

 3:在IE6,7下输入类型的表单控件输入文字的时候,背景图片会跟着一块移动

 解决办法: 把背景加给父级 ,再清掉自身背景
 
 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7 .box{ width:100px;height:30px;border:1px solid red;background:yellow; background:url(ball.png) no-repeat;}
 8 input{width:100px;height:30px;border:none;margin:0;padding:0; float:left; background:none;}
 9 /*
10  在IE6,7下输入类型的表单控件上下各有1px的间隙
11  解决办法:给input加浮动
12  
13  在IE6,7下输入类型的表单控件加border:none;无效
14  解决办法: 重置input的背景
15  
16  在IE6,7下输入类型的表单控件输入文字的时候,背景图片会跟着一块移动
17  解决办法: 把背景加给父级 ,再清掉自身背景
18 */
19 </style>
20 </head>
21 <body>
22 <div class="box">
23  <input type="text" />
24 </div>
25 </body>
26 </html>

 

4:在ie六下margin负值超过父级边界,内容就会被父级截掉

解决的办法:就是加相对定位

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7 .box{float:left;border:10px solid #000;margin:20px; display:inline;}
 8 .box div{width:100px;height:100px;background:red; position:relative;}
 9 //在ie六下margin负值超过父级边界,内容就会被父级截掉
10  //解决的办法就是加相对定位
11  
12 .div1{margin-top:-30px;}
13 .div2{margin-left:-30px;}
14 .div3{margin-bottom:-30px;}
15 .div4{margin-right:-30px;}
16 </style>
17 </head>
18 <body>
19 <div class="box">
20  <div class="div1"></div>
21 </div>
22 <div class="box">
23  <div class="div2"></div>
24 </div>
25 <div class="box">
26  <div class="div3"></div>
27 </div>
28 <div class="box">
29  <div class="div4"></div>
30 </div>
31 </body>
32 </html>

 

5: !important  提升样式优先级权重

样式优先级:
默认 < 类型 < class < id < style(行间) <important

 在IE6下 在important 后边在加一条同样的样式,会破坏掉important的作用,会按照默认的优先级顺序来走

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7 .box{width:100px;height:100px;background:red !important; background:pink;}
 8 /*
 9  在IE6下 在important 后边在加一条同样的样式,会破坏掉important的作用,会按照默认的优先级顺序来走
10 */
11 </style>
12 </head>
13 <body>
14 <div class="box" style="background:#000;"></div>
15 </body>
16 </html>

正常情况下显示效果:

css-兼容性问题及解决(三)_第3张图片

IE6下显示效果:

css-兼容性问题及解决(三)_第4张图片

你可能感兴趣的:(css-兼容性问题及解决(三))