Question

我在服务器之间出现奇怪的间距问题。

我使用的是IE 8和FF 7.0.1 在所有3种环境中，FF中的一切看起来都很好

对于IE 8：在我的本地机器上运行一切（运行IIS 7）在我的构建服务器上运行一切（运行IIS 7）间距发生在我的登台服务器（运行IIS 6）

上

在我的web.config中，我设置了以下代码：

<httpProtocol>
      <customHeaders>
          <clear />
          <add name="X-UA-Compatible" value="IE=8" />
      </customHeaders>
  </httpProtocol>

这似乎适用于IIS 7但不支持IIS 6.因为我不是服务器管理员，所以我一直在尝试确定我可以在代码端修复的内容并且它引导我到css我我正在使用。

        <header>
        <img src="@Url.Content("~/Images/header_my_logo.png")" alt="my_logo" id="my_logo" />
        <img src="@Url.Content("~/Images/my_button.jpg")" alt="my_logo2" id="my_logo2" width="160" height="57" />
        <nav>
            <ul id="menu">
                <li class="aHome">
                    @Html.ActionLink("Goals", "Index", "Home")</li>
                <li class="blank">
                    @Html.ActionLink("Contact", "Contact", "Home")</li>
            </ul>
        </nav>

在CSS端：

#my_logo, #my_logo2
{ 
float:right; 
/*--- margin: 5px 15px 15px 15px; ---*/
margin: 5px 15px 0px 15px;
}

和

ul#menu 
{
border-bottom: 1px solid #51759B;
width: 563px;
padding: 2px 0;
position: relative;
margin: 45px 0 0;
text-align: left;
}

ul#menu li {
display: inline;
list-style: none;
}

ul#menu li a, ul#menu li a:hover {
padding: 15px 30px;
font-size: 14px;
font-weight: bold;
text-decoration: none;
color: #51759b;
border-radius: 0 0 0 0;
-webkit-border-radius: 0 0 0 0;
-moz-border-radius: 0 0 0 0;
}

ul#menu li a
{
-moz-background-size: 100px 35px;
background-size: 100px 35px;
background-repeat: no-repeat;
background-origin:border-box;
text-decoration: none;
}

.aHome a {
background-image: url(/ILP/Images/nav_hometab.png);
color:#fff !important;
}

我的徽标并排显示在右上角。导航（选项卡）显示在这些下方。它位于徽标和我看到间距的标签之间（对于我的标签，一般来说线条高度略有问题，因为顶部被削掉了）。我会尽快发布一张图片。

我真的很感激任何帮助！

Answer 1

如果<add name="X-UA-Compatible" value="IE=8" />能够在IIS7上修复它，并且您正在寻找可以添加到HTML的修补程序，那么请查看以下内容：

<meta http-equiv="X-UA-Compatible" content="IE=8">

将其添加到您的<head>。

尽管如此，最好完全摆脱X-UA-Compatible（或将其设置为IE=edge，这意味着“使用最新的可用版本”），并修复您的网站以适用于所有版本Internet Explorer。迫使IE9和更新版本显示为IE8并不是一件好事。

Answer 2

我认为这可能是臭名昭着的IE空白错误，它让人头疼。尝试将整个菜单代码放在一行，看看是否修复了它。 e.g。

<ul id="menu"><li class="aHome">@Html.ActionLink("Goals", "Index", "Home")</li><li class="blank">@Html.ActionLink("Contact", "Contact", "Home")</li></ul>

Answer 3

您是否尝试将img徽标设为display:block或添加vertical-align:top？

IE 7中的奇怪间距问题

3 个答案: