Блог

Я очень долго искал решение своей проблемы, но мне еще предстоит найти что-нибудь, что работает.

Я создал веб-сайт несколько лет назад, когда Internet Explorer 8 был основным используемым браузером, и добавил макет, чтобы все выглядело хорошо именно для него. В настоящее время некоторые макеты выглядят как дерьмо на чем угодно, кроме Internet Explorer 8 (вам также необходимо добавить домен в настройки представления совместимости). Я знаю, что мне, скорее всего, следует все переписать, но мне было интересно, нет ли способа определить конкретную проблему с макетом или грязное css исправление, чтобы оно выглядело хорошо с помощью IE8 / Chrome?

Одна страница в Chrome: http://sv.tinypic.com/r/oh8yoi/9

Та же страница в Internet Explorer 8: http://sv.tinypic.com/r/2wnzcz4/9

HTML с этой страницы:

 <div style="position: relative; left: 0px; top: 0px; width: 523px; height: 38px; background-color:#cccccc">
    <span style="width: 190px; height: 38px" class="border1px">
        <div class="INBDheadline">Kund</div>
        <div class="INBDcontent"></div>
    </span>
    <span style="width: 104px; height: 38px; margin-left:-1px;" class="border1px">
        <div class="INBDheadline">Ort</div>
        <div class="INBDcontent"></div>
    </span>
    <span style="width: 81px; height: 38px; margin-left:-1px;" class="border1px">
        <div class="INBDheadline">Avgångstid</div>
        <div class="INBDcontent"></div>
    </span>
    <span style="width: 81px; height: 38px; margin-left:-1px;" class="border1px">
        <div class="INBDheadline">Orderrader</div>
        <div class="INBDcontent"><span id="OrderRowCount">0</span></div>
    </span>
    <span style="width: 71px; height: 38px; margin-left:-1px;" class="border1px">
        <div class="INBDheadline">Kollin</div>
        <div class="INBDcontent"><span id="DFPCount">0</span></div>
    </span>
</div>
  

Классы CSS:

 .INBDheadline {
    font-family: Arial;
    font-size: 8pt;
    text-indent:4px;
}
.INBDcontent {
    font-family: Arial;
    font-size: 8pt;
    text-indent:4px;
}
.border1px {
    border: 1px #000000 solid;
}
  

Любые идеи или предложения (кроме очевидного решения для перестройки всего) будут с благодарностью приняты!

Прогресс 1
Добавление следующего css для класса border1px, похоже, предотвращает перевод новой строки в каждом <span> элементе, делая его намного лучше:

 .border1px {
    border: 1px #000000 solid;
    float: left;
}
  

Прогресс 2
Добавление следующего css, похоже, исправляет границу, вызывающую дополнительную ширину:

 * {
    box-sizing: border-box;
}