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

1:计算一定要精确 不要让内容的宽高超出我们设置的宽高, 在IE6下,内容会撑开设置好的宽高

 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:400px;}
 8 .left{ width:200px;height:300px;background:red;float:left;}
 9 .right{ width:200px;float:right;}
10 .div{width:180px;height:180px;background:blue;padding:15px;}
11 /*
12  计算一定要精确 不要让内容的宽高超出我们设置的宽高
13  在IE6下,内容会撑开设置好的宽高
14 */
15 </style>
16 </head>
17 <body>
18 <div class="box">
19  <div class="left"></div>
20     <div class="right">
21      <div class="div"></div>
22     </div>
23 </div>
24 </body>
25 </html>
IE6:
css-兼容性问题及解决(四)_第1张图片
 
标准下:
css-兼容性问题及解决(四)_第2张图片
 

2:元素浮动之后 能设置宽度的话 就给元素加宽度 ;如果需要宽度是内容撑开 就给它里边的块元素 加上浮动;(ie6下)

 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:400px;}
 8 .left{background:red;float:left;}
 9 .right{float:right; background:blue;}
10 h3{margin:0;height:30px; float:left;}
11 /*
12  在IE6元素浮动,如果宽度需要内容撑开,就给里边的块元素都加浮动
13 */
14 </style>
15 </head>
16 <body>
17 <div class="box">
18  <div class="left">
19      <h3>左侧</h3>
20     </div>
21     <div class="right">
22      <h3>右侧</h3>
23     </div>
24 </div>
在ie6下 里边的块元素都加浮动:
css-兼容性问题及解决(四)_第3张图片
 
 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:400px;}
 8 .left{background:red;}
 9 .right{ background:blue;}
10 h3{margin:0;height:30px;}
11 /*
12  在IE6元素浮动,如果宽度需要内容撑开,就给里边的块元素都加浮动
13 */
14 </style>
15 </head>
16 <body>
17 <div class="box">
18  <div class="left">
19      <h3>左侧</h3>
20     </div>
21     <div class="right">
22      <h3>右侧</h3>
23     </div>
在ie6下 里边的块元素不加浮动显示效果:
css-兼容性问题及解决(四)_第4张图片

 

 

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 .left{width:100px;height:100px;background:Red; float:left;}
 8 .right{width:200px;height:100px;background:blue;float:left;}
 9 /*
10  在IE6,7下元素要通过浮动并在同一行,就给这行元素都加浮动
11 */
12 </style>
13 </head>
14 <body>
15 <div class="box">
16  <div class="left"></div>
17     <div class="right"></div>
18 </div>
19 </body>
20 </html>

 

4:第一块元素浮动,第二块元素加margin值等于第一块元素,在IE6下会有间隙(3px)问题;

解决办法:css hack ;_margin-left:-3px
 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 .left{width:100px;height:100px;background:Red; float:left;}
 8 .right{width:200px;height:100px;background:blue;margin-left:100px;_margin-left:-3px;}
 9 </style>
10 </head>
11 <body>
12 <div class="box">
13  <div class="left"></div>
14     <div class="right"></div>
15 </div>
16 </body>
17 </html>

IE6下显示:

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

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