преобразование текста: верхний регистр вызывает ошибку компоновки в Chrome - PullRequest
Новая
       42

преобразование текста: верхний регистр вызывает ошибку компоновки в Chrome

2 голосов
/ 24 февраля 2012

Я столкнулся со странной ошибкой компоновки, которая, по-видимому, вызывается свойством text-transform CSS, когда inline-block вложен в элемент block. Я также видел проблему в Safari (5.1.2), но этот минимальный тестовый случай срабатывает только в Chrome (17.0.963.56).

Особенно интересным является то, что открытие инструментов разработчика и сохранение их на вкладке «Элементы» приводит к правильной компоновке. Мое лучшее предположение состоит в том, что сочетание правил CSS и структуры DOM приводит к тому, что движок webkit пропускает повторное выполнение страницы. 

<!DOCTYPE html>
<html>
    <head>
        <title>Menu Widget Test</title>
        <style type="text/css">
            .container
            {
                border: 1px solid black;    
                display: inline-block;      
            }

            .title
            {   
                text-transform: uppercase; /* <-- Remove this and it works */
            }
        </style>

        <script type="text/javascript">
            document.addEventListener("DOMContentLoaded", function() {
                document.getElementById("firstName").innerHTML = "John";
                document.getElementById("lastName").innerHTML = "Smith";
            }, false);
        </script>
    </head>
<body>
    <div>  <!-- Remove this DIV element, and it works -->
        <span class="container">
            <span class="title">
                <span id="firstName"></span>
                <span id="lastName"></span>
            </span>
        </span>
    </div>  
</body>
</html>

Вот два снимка экрана, на которых показаны два способа визуализации в Chrome в зависимости от того, удалено правило text-transform или элемент div.

Bad rendering on the left, correct on the right

Я хотел бы использовать свойство text-transform, но мне интересно, является ли это известной ошибкой и что я могу сделать, чтобы не вызывать поведение. Даже возможность явно инициировать событие reflow может быть достаточно хорошей.

Ответы [ 2 ]

1 голос
/ 07 июля 2013

У меня была такая же проблема, и я решил ее с помощью white-space:nowrap;.

0 голосов
/ 06 марта 2012

Кажется, что в загрузке css есть своего рода состояние гонки.Следующий файл воспроизводит ошибку здесь, в Chrome (17.0.963.65) на osx 10.6.8.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Schizophrenic layout</title> 
    <style type="text/css">
      body { background-image:url('gray.png'); }
      #d0{display:inline-block;}
      #d1{text-transform:uppercase;}
      #d2{text-transform:uppercase;}
    </style>
    <script type="text/javascript">
      function fill (id, text)
      {
        var e = document.getElementById (id);
        var t = document.createTextNode (text); 
        e.appendChild (t);
      }

      function main () 
      {   
        fill ("d1", "First line");
        fill ("d2", "Second line"); 
      }
      window.onload = main;
    </script>
  </head>
  <body>
    <div id="d0">
      <div id="d1"></div> 
      <div id="d2"></div>
    </div>
  </body>
</html>

Обратите внимание, что ошибка присутствует, даже если gray.png не 404. Возможно, вам придется перезагрузить страницу несколько раз, чтобы засвидетельствовать ошибку.Также, если вы не получаете файл через http, ошибка отображается только один раз, при первой загрузке страницы с диска.

Существуют различные способы заставить ошибку исчезнуть путем настройки css.Удаление только background-image заставляет его исчезнуть.Удаление только display заставляет его исчезнуть.Удаление только двух text-transform делает его исчезающим.В последнем случае правильная компоновка может быть достигнута путем добавления 

     e.style.textTransform = "uppercase";

в конце функции fill, что, конечно, очень уродливый обходной путь.

...