0

大家好,我对网页设计很陌生,我学到的越多,我就越意识到 IE 在呈现方式方面有点笨拙。在 Firefox 和 chrome 中一切正常,但在 IE 中,我的标题高度增加了一倍。我不确定为什么。我已经制作了所有 div 并在 css 中完成了所有定位。这是我的CSS。

网站:http ://www.discerningear.com

html { font-family:Arial, Helvetica, sans-serif; color:#333; }
body {  background:#a99a6f; margin:0 auto; text-align:center;}
img { border-style: none; }
#slide{ max-width:100%; -moz-box-shadow: 0px 0px 12px #fff; -webkit-box-shadow: 0px 0px 12px #fff; box-shadow: 0px 0px 12px #fff; }
#container { -moz-box-shadow: 0px 0px 12px #000; -webkit-box-shadow: 0px 0px 12px #000; box-shadow: 0px 0px 12px #000; text-align: left; width:800px; height:1500px; margin:0 auto; background:#d4d4d4; background-image:url("/includes/images/container.jpg"); background-repeat:no-repeat;}
#header { width:100%; height:160px; padding:0 0 0 0; background-image:url('/includes/images/wave-header-background.jpg');}
#logo { float:left; height:80px; margin:5px; }
.logoImage{ content:url("/includes/images/DiscerningEar_Logo.png"); height:100%; }
#top_info { float:right; width:450px; height:40px; padding:0 0 0 0 ; margin:20px; }
#top_info  ul { margin:0; padding:0; list-style-type:none;}
#top_info  ul li { margin:0; padding:0px; float:left; }
#top_info  ul li a { display: -moz-inline-stack; display: inline-block; width: 100px; height: 35px; background: url("http://dabuttonfactory.com/b.png?t=&f=Calibri-Bold&ts=18&tc=ffffff00&tshs=1&tshc=22222200&it=png&c=5&bgt=gradient&bgc=8c7f5e&ebgc=000000&bs=2&bc=a9996f&shs=2&shc=4d4d4d&sho=se&w=100&h=35") no-repeat; line-height: 35px; vertical-align: text-middle; text-align: center; color: #ffffff; font-family: Calibri; font-size: 14px; font-weight: bold; font-style: normal; text-shadow: #222222 1px 1px 0; }
#top_info ul li a > span { display: -moz-inline-block; }
#navbar {padding:20px 0 180px 0; height:60px; clear:both; }
#navbar ul { margin:0; padding:0; list-style-type:none;}
#navbar ul li { margin:0; padding:0px; float:left; }
#navbar ul li a { font-size:12px; float:left; padding:0 0 0 20px; display:block;}
#banner {  background-image:url('/includes/images/banner-background.jpg'); margin-top:-12px; width:100%; height:180px; clear:both; padding:0 0 0 0; text-align:center;}
#left_col { float:left; width:30%; height:600px; border:1px solid #333; color:#fff; padding:20px; }
#right_col { float:right; width:58%; height:600px; border:1px solid #333; color:#fff; padding:20px; }
#footer { padding:20px; clear:both; }

我不知道是什么原因造成的,但任何帮助都会很棒。我正在继续寻找解决方案,但截至目前,我想我只是不知道解决这个问题的最佳方法。

4

1 回答 1

0

很可能是因为IE 双页边距错误。当浮动元素也应用了边距时,它会在 IE6 中发生(在您的情况下,很可能是#logo)。

解决方法是在 display: inline;该元素的 CSS 中添加:。

于 2013-05-14T19:19:06.467 回答