Странный пробел в IE 7 - PullRequest
Новая
       1

Странный пробел в IE 7

0 голосов
/ 13 октября 2011

У меня странная проблема с интервалами между серверами.

Я использую IE 8 и FF 7.0.1 Все хорошо выглядит в FF во всех 3 средах

Для 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 I пользуюсь. 

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

Мои логотипы появляются рядом в правом верхнем углу. Навигация (вкладки) отображаются под ними. Это между логотипами и вкладками, где я вижу интервалы (а также небольшая проблема с высотой линии в целом для моих вкладок, так как верхняя часть сбрита). Я постараюсь опубликовать изображение в ближайшее время.

Я очень ценю любую помощь!

Ответы [ 3 ]

2 голосов
/ 13 октября 2011

Если <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 не очень хорошая вещь.

0 голосов
/ 13 октября 2011

Вы пытались установить логотипы img на display:block или добавить vertical-align:top?

0 голосов
/ 13 октября 2011

Я думаю, что это может быть печально известная ошибка с пробелами в IE, поднимая свою уродливую голову. Попробуйте поместить весь код меню в одну строку и посмотрите, исправит ли это. например, 

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