div+css 排版兼容的问题，高手进

Question

<div style="width:200px; height:100px; border:1px #000 solid;">
<img src="#" width="40" height="40" style="float:left; width:40px;" />
<p style="width:150px; border:1px #000 solid; margin:0px; padding:0px;">简略简略简略简略简略简略简略简略简略简略简略简略简略简略简略简略简略简略简略简略简略简略简略 </p>
</div>

以上代码的P宽度 随着IE版本不一样显示的也不一样，主要就是想解决P的宽度，在IE6里P的边框是计算了IMG的宽度 而IE8里，他会和IMG的宽度位置一样，但是文字却是从IMG宽度开始计算。如何让上面代码，显示的和IE8一样，在IE6下

Answer 1

这主要是因为img标签是内联标签，p是块标签。
块标签（比如div、table）在不对其设置定位时，它是不允许其他的块标签跟它并排的。
内联标签（如a、span等）是用在行内(有人会叫它行内标签)，用来修饰字的，在用上它时，它不会像块标签一样独占一行，而是融合在文字等地方，跟其他内联标签和谐相处。
当块标签与内联标签相遇时（尤其是像这种情况下），不同的浏览器的解释是不一样的。
要想实现图文混排效果（比如文字半包围图片）可以把img标签放到块标签p里面，然后让img标签浮动即可。

Answer 2

p标签给个左浮动，试试

Answer 3

再另外给IE6定义一个样式！_width:**px; 就像这样子写！然后根据实际页面情况来调节给IE6定义的宽度值！
不过IE6马上就淘汰掉啦！前段又少了一个头疼的问题！要是全世界都用火狐就好了！嘿嘿...

希望采纳 x1、fei

Answer 4

flaot浮动造成IE6下面双倍边距问题，这个最常见，也最好处理，!important解决

详细见

http://zhidao.baidu.com/question/202937345.html?si=1

参考资料：http://zhidao.baidu.com/question/202937345.html?si=1

Answer 5

给你的p标签加个overflow:hidden;float:left;这样在每个浏览器的边框就都算在宽度之外，就没有兼容问题了，解决在ie6双倍距离的问题用important是解决不了的，因为ie6不认识important，只会按照你样式的先后去选择，用_display:inline;前面的_只有ie6才会识别，所以_display:inline;对别的浏览器没有效果！