DIV排版IE6 IE7 firefox兼容问题 博客CSS

来源：百度知道 编辑：UC知道 时间：2024/05/24 01:43:32
wordpress一个主题Blue Weed的style.css代码。ff下显示正常，chrome也正常。但是ie6显示不正常，边栏涨大，并且排列不整齐。可以看看效果http://www.dreamtechy.cn/
部分代码：
/*++++++ CONTENT ++++++++*/
#content { width: 917px; margin:10px auto 10px; }
#latest { width:907px; margin: 0 auto 10px; padding:5px; border:1px solid #d4dee4;}
#latest p { padding-bottom:10px;}
#latest p a { font-weight:bold; color:#0578ac;}
#latest h2 { font-size:16px; font-family:Arial;}
#latest h2 small { font-size:12px; font-weight:normal; padding-left:20px;}
#latest h2 a { color:#006bb2;}
#latest h2 a:hover { color:#074d7c;}
#lbg { width:897px; background:#ecf8ff; padding:5px; margin-bottom:5px; line-height:140%;}
#left { float: left; width: 555px; }
#right { float:right; width:352px;}
.entry h2 { display:block; background:#DAEBF3; font-family:Arial; padding-left:10px; font-size:14px; margin-bottom:10px; }
.entry

不要用p标签，用div,然后在div里把高和宽再设一次
就如：
<p><img src="http://image-001.yo2cdn.com/wp-content/uploads/325/32523/2009/01/zrclip-001n1d504817.png" height="795" width="520"></p>
改成：
<div style="width:520px; height:795px"><img src="http://image-001.yo2cdn.com/wp-content/uploads/325/32523/2009/01/zrclip-001n1d504817.png" height="795" width="520"></div>

图片太大，试试加上overflow：hide；

另外把图片加上display：inline；如果float：left等的时候，这句可以解决ff和ie6 对margin的解释不同的问题。

图片不要加大小。

加图片时最好不要加width和height属性，因为如果你加了就不好用CSS控制了，只能在包含图片的容器上加上overflow:hidden;
最好的方法是用max-width，你需要根据窗口的最大宽度来计