Почему моя семья шрифтов влияет на проблему переноса? - PullRequest
Новая
       3

Почему моя семья шрифтов влияет на проблему переноса?

1 голос
/ 22 мая 2011

У меня фиксированная ширина ul со встроенными li с.Внутри некоторых из li у меня есть a со ссылками.Я по сути делаю вкладки.Я установил все значения li с фиксированной шириной, которые прямо равны ширине ul.Это прекрасно работает в Chrome.В Opera и Firefox отключены пиксели.Но в IE li переходит в новый ряд.Я как можно больше разобрал свой HTML и CSS и поместил в JSFiddle.Я обнаружил, что по какой-то вонючей причине font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif; вызывает это.Когда я удаляю это, это исправлено.Я хотел бы знать, ПОЧЕМУ ???

HTML: 

 <ul id="menu">
                <li class="side"></li>
                <li class="spacer first"></li>
                <li><a href="">Test</a></li>
                <li class="spacer"></li>
                <li><a href="">Test</a></li>
                <li class="spacer"></li>
                <li><a href="">Test</a></li>
                <li class="spacer"></li>
                <li><a href="">Test</a></li>
                <li class="spacer last"></li>
                <li class="side last"></li>
            </ul>

CSS: 

    body { font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
}
ul#menu {
       width:1110px; 
}

ul#menu li {
    display: inline;
  }
ul#menu li.side
{
padding-right:100px;
      }
ul#menu li.spacer.first
{
    padding-right:85px;
}
ul#menu li.spacer.last
{
    padding-right:85px;
}
ul#menu li.side.last
{
    background-position:0px 0px;
    padding-right:100px;
}
ul#menu li.spacer
{
   padding-right:84px;
  }

ul#menu li a 
{ margin-right:-4px;
    text-align:center;
    width:122px;
    font-size:x-large;
      display:inline-block;
    font-weight: bold;
    text-decoration: none;
    padding-top:13.5px;
    padding-bottom:14.5px;
    background-color:blue;
    color: #000;


   }

Вы можете увидеть поведение здесь: http://jsfiddle.net/GfSLC/14/ Спасибо!Дайте мне знать, если мне нужно предоставить больше информации.

1 Ответ

1 голос
/ 22 мая 2011

Я думаю, просто браузеры отображают страницы немного по-другому.Другой шрифт будет влиять на ширину и высоту элемента с width:auto; height:auto.Например, высота вашего <a> уменьшается на 3 пикселя, если вы удалите font-family.Различные глифы шрифтов будут занимать различное количество места.

В этом случае проблема заключается в том, что один браузер вычислил ширину всех <li>, чтобы быть больше, чем ширина содержащего элемента, и он проливаетперейти к следующей строке.Чтобы это исправить, вы можете:

  • применить семейство шрифтов к <li> вместо <body>
  • , чтобы уменьшить ширину элементов распорки на 1-2px

Кроме того, IE8 в режиме причуд отображает страницу, как и ожидалось;в стандартном режиме он переполняет контейнер.

...