IE中怎么会出现双倍边距？-DivCSS教程

最新推荐文章于 2021-08-03 21:17:06 发布

原创最新推荐文章于 2021-08-03 21:17:06 发布 · 468 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#ie #xhtml #css #xml #float

本文介绍了一个IE6浏览器特有的CSS布局问题——双倍边距BUG，并提供了一种简单有效的解决方案，即通过添加display:inline属性来修正该问题。

IE6.0环境中双倍边距BUG。先看下面的CSS代码。

div { float:left; margin-left:10px; width:420px; height:150px; border:1px solid red }

这样设置以后。本来左边距设置为10px，但IE6.0解释为20px，这是一个比较头疼的问题。

但解决也非常简单。办法就是是加上display:inline。就搞定了。看下面的示例对比！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.itmop.com</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">body { margin:0 } div { float:left; margin-left:10px; width:420px; height:150px; border:1px solid red }</style> </head> <body> <div> Div CSS XHTML XML 教程大全<br />Div CSS XHTML XML 教程大全<br />Div CSS XHTML XML 教程大全<br />Div CSS XHTML XML 教程大全<br />Div CSS XHTML XML 教程大全<br />Div CSS XHTML XML 教程大全<br />Div CSS XHTML XML 教程大全<br /> </div> </body> </html>

解决BUG以后的效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.itmop.com</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">body { margin:0 } div { float:left; margin-left:10px; display:inline; width:420px; height:150px; border:1px solid red }</style> </head> <body> <div> Div CSS XHTML XML 教程大全<br />Div CSS XHTML XML 教程大全<br />Div CSS XHTML XML 教程大全<br />Div CSS XHTML XML 教程大全<br />Div CSS XHTML XML 教程大全<br />Div CSS XHTML XML 教程大全<br />Div CSS XHTML XML 教程大全<br /> </div> </body> </html>