Ошибка в IE11

У меня есть тег <h1> с твердой рамкой, но по какой-то причине граница не проходит полностью вокруг элемента. Это случается иногда в IE11, а также при перезагрузке сайта он (* border) ведет себя странно, но иногда он выглядит нормально.

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

HTML

<h1><span style="color:#FFFFFF"><span class="highlight">LOREM</span>&nbsp;IPSUM DOLOR SIT AMET CONTETEUR</span></h1>

CSS

.block h1 {
    border: solid 5px white;
    display: inline-block;
    padding: 10px 20px 10px 20px;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

ОТВЕТЫ

Ответ 1

Если проблема устранена с удалением веб-шрифта и возникает только при перегрузке, может ли это быть вызвано несогласованностью времени при освежении? Например, иногда шрифт загружается перед вычислением элемента (хороший результат), а иногда и после (в результате границы отображаются на основе границы того, что IE11 идентифицирует как резервный шрифт).

Ответ 2

Добавьте этот класс, он будет работать в IE:)

.text-element-14 h1 span{
   display:inline-block;
}

Попробуйте это, а затем добавьте рамку

Ответ 3

Так как я не смог воспроизвести проблему, в IE 11 я предлагаю изменить способ установки элементов. Вместо

<h1>
    <span style="color:#FFFFFF">
        <span class="highlight">LOREM</span>
        &nbsp;IPSUM DOLOR SIT AMET CONTETEUR
    </span>
</h1>

Я поеду за

<h1 style="color:#FFFFFF">
    <span class="highlight">LOREM</span>
    &nbsp;IPSUM DOLOR SIT AMET CONTETEUR
</h1>

Надеюсь, что это поможет

Ответ 4

Это, вероятно, происходит только тогда, когда инструменты разработчика открыты и тестируются локально, и даже тогда не регулярно. Вы также можете наблюдать это поведение в IE10, где это происходит (не так часто, как в IE11).

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

Хотя из моего понимания проблемы я думаю, что ее можно решить, создав встроенный элемент HTML и получить его размер до загрузки DOM ready/webfont, а затем запустите интервал, чтобы проверить измененный размер встроенного элемента HTML и включить его и вернуть изменение DOM на этом элементе. Дайте мне знать, если вам нужна помощь в создании script, на всякий случай, но я думаю, что вы не сможете воспроизвести эту проблему на производственной версии, поэтому я не уверен, что вы все еще заинтересованы в решении этой проблемы.

Ответ 5

.text-element-14 h1 span {
     border: solid 5px white;
     display: inline-block;
     padding: 10px 20px 10px 20px;
     margin: 0;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
}

Ответ 6

Я сделал небольшое исследование и считаю, что это ошибка в IE. Если вы измените h1 на p-тэг, тогда сделайте шрифт размером, который вы хотите, чтобы он отображался правильно.

Вот сайт, на котором я нашел информацию. https://css-tricks.com/ie-css-bugs-thatll-get-you-every-time/

Вы также можете попробовать этот метатег.

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

Я не могу воспроизвести ошибку, но здесь была награждена награда https://superuser.com/questions/838802/ie11-renders-elements-with-border-radius-incorrectly

Ответ 7

Проверьте класс Bootstrap ".clearfix"