关于浮动在不同浏览器的兼容性
1 <!DOCTYPE html 2 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 <html xmlns="http://www.w3.org/1999/xhtml"> 5 <head> 6 <title>浮动布局</title> 7 <meta name="keywords" content=""> 8 <meta name="description" content=""> 9 <meta name="author" content=""> 10 <meta http-equiv="content-type" content="text/html;charset=utf-8"> 11 <style type="text/css"> 12 #div1{ 13 width:100px; 14 height:100px; 15 background:red; 16 } 17 #div2{ 18 width:200px; 19 height:200px; 20 background:green; 21 } 22 #div3{ 23 width:100px; 24 height:100px; 25 background:blue; 26 } 27 </style> 28 </head> 29 <body> 30 <div id="div1">1</div> 31 <div id="div2">2</div> 32 <div id="div3">3</div> 33 </body> 34 </html>
运行效果:
在ie6,7,8,火狐运行效果都一样。但当我给第一个div加上左浮动float:left;时,问题就来了。在看运行效果:
ie6,7:
ie8,火狐:
二、把三个div都设置为左浮动就不会有兼容性的问题
二、右浮动也不会有兼容性的问题
每天进步一点点。