Chrome неправильно отображает макет после обновления, почему?

Question

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

Решения, предлагаемые на других потоках, связаны с проблемой использования элементов уровня блока внутри якоря. У меня нет якорей, и у меня есть эта проблема.

Вот неисправна HTML:

<div class="job" style="background:#a13b3b;"> 
    <div class="jobd" style="background:#802f2f;"> 
     J 
    </div> 
    Job Name 
</div> 

Вот CSS для этого:

.job { 
    height:24px; 
    line-height:24px; 
    color:#FFFFFF; 
    padding-right:4px; 
    display:block; 
    float:left; 
    margin-right:2px; 
    margin-bottom:2px; 
} 

.jobd { 
    display:block; 
    height:24px; 
    width:24px; 
    line-height:24px; 
    text-align:center; 
    float:left; 
    margin-right:4px; 
} 

Как я уже сказал, это отлично работает в IE, FF, и даже Chrome, пока не обновят страница в хроме. Что происходит, второе слово, в этом случае «имя» попадает в новую строку под всем div. Даже проверка элементов показывает, что ширина «задания» div уменьшается с правильной ширины 192 пикселей, вплоть до 164 пикселей. Я полностью смущен этим поведением и понятия не имею, как исправить это.

P.S. на странице также есть несколько других мест, где используется почти тот же HTML/CSS, и все это работает отлично, но тогда они имеют заданную ширину.

Любая помощь приветствуется.

EDIT:

У меня есть глобальный ответ на некоторые из ответов и комментариев, так что я буду править пост здесь:

Это проблема на нескольких страницах, а также для других пользователей (я могу» t, потому что он ограничен регистрацией), но я не могу воспроизвести его на других страницах, что заставило бы меня поверить, что это связано с моими другими элементами. Однако, если я выберу все, кроме этой части, у меня все еще есть проблема. Я очищу все, кроме этих div, перезагрузите страницу, и у меня проблема со всем остальным контентом. Однако, если я перехожу на страницу напрямую, она загружается только с этими div, и она загружается правильно.

Кроме того, я не знаю, имеет ли это какое-либо следствие, но я использую xhtml 1.0 в качестве моего doctype. Еще одна вещь, которую стоит отметить, заключается в том, что большая часть контента, включая эту часть, генерируется с помощью php. Я не могу представить, что это повлияло на это, но может быть?

Answer 1

Попробуйте JSBIN

.job { 
    height:24px; 
    line-height:24px; 
    color:#FFFFFF; 
    display:inline-block; 
    padding-right: 4px; 
    margin-right:2px; 
    margin-bottom:2px; 
    white-space: nowrap; 




} 

.jobd { 
    display:block; 
    height:24px; 
    width:24px; 
    line-height:24px; 
    text-align:center; 
    float:left; 
    margin-right:4px; 
} 

Answer 2

Возможно, страница зашифрована. Попробуйте одно и то же на чем-то вроде JSFiddle и посмотрите, можете ли вы воспроизвести проблему. Если это так, то это связано с наценкой, и я не понимаю, почему она должна быть совершенной.

Если вы не можете воспроизвести проблему, вы знаете, что что-то происходит с вашей кэшированной страницей.

Answer 3

Какая версия вы используете? Я использую 27 на Mac OS X, и это выглядит хорошо для меня, независимо от того, сколько раз я обновляю. Может быть, вам стоит попробовать очистить кеш?