Strange spacing issue in IE 7_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-04-13 06:27 出处：网络

I have strange spacing issue occurring between servers. I use IE 8 and FF 7.0.1 Everything looks fine in FF in all 3 environments

相关专题：css doctype

I have strange spacing issue occurring between servers.

I use IE 8 and FF 7.0.1 Everything looks fine in FF in all 3 environments

For IE 8: Everything looks fine on my local machine (running IIS 7) Everything looks fine on my build server (running IIS 7) The spacing occurs on my staging server (running IIS 6)

In my web.config I've set the following code:

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

That seems to work on IIS 7 but is unsupported for IIS 6. Because I'm not a server admin, I've been trying to determine what I can fix on the code-side and it's led me to the css I'm using.

        <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>

On the CSS end:

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

and

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: no开发者_如何学运维ne;
}

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

My logos appear side-by-side in the upper-right corner. The navigation (tabs) appear below those. It's between the logos and the tabs where I'm seeing spacing (and also a slight issue with line height in-general for my tabs as the top is shaved off). I will try to get an image posted shortly.

I really appreciate any help!

If <add name="X-UA-Compatible" value="IE=8" /> works to fix it on IIS7, and you're looking for a fix you can add to your HTML, look no further than:

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

Add it to your <head>.

Though, it would be better to completely get rid of X-UA-Compatible (or set it to IE=edge, which means "use the newest available version"), and fix your site to work in all versions of Internet Explorer. Forcing IE9 and newer to display as IE8 is not a good thing.

I think this might be the infamous IE whitespace bug rearing it's ugly head. Try putting the entire menu code on one line and see if that fixes it. e.g.

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

Have you tried setting the img logos to display:block or adding vertical-align:top ?