Проблема с пробелами в Webkit - PullRequest
Новая
       15

Проблема с пробелами в Webkit

1 голос
/ 21 февраля 2011

Привет, ребята, вы получаете сообщение об ошибке в браузерах webkit (chrome / safari), когда отступы обрезаются из тегов привязки.

Вот пример: 

    <html>
    <head>
        <style type="text/css">
        body 
        {   
            background-color: #F4F4E7;  
            margin: 0;  padding: 0;
            font-family: Arial, sans-serif;
        }   
        .restrictedSpace
        {
            margin: 40px;
            width: 300px;
            border: 1px solid #999;
            line-height: 28px;
            white-space: normal;
        }
        .restrictedSpace a
        {
            font-weight: normal;
            font-size: 11px;
            background-position: 7px 7px;
            padding: 5px 7px;
            background-color: #000;
            color: #fff;
            text-decoration: none;
        }
        </style>
    </head>
    <body>
    <div class="restrictedSpace">
        <a href="">Here&nbsp;Is&nbsp;A&nbsp;Button</a> <a href="">Here&nbsp;Is&nbsp;A&nbsp;Button</a> <a href="">Here&nbsp;Is&nbsp;A&nbsp;Button</a>  <!-- extra space here--> <a href="">Here&nbsp;Is&nbsp;A&nbsp;Button</a> <a href="">Here&nbsp;Is&nbsp;A&nbsp;Button</a> <a href="">Here&nbsp;Is&nbsp;A&nbsp;Button</a>
    </div>
    </body>
</html>

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

Есть мысли?

РЕДАКТИРОВАТЬ:

Я также провел сравнение в каждом из основных браузеров.У них у всех разный рендеринг.

http://i.stack.imgur.com/WyNGK.jpg

Ответы [ 4 ]

3 голосов
/ 22 февраля 2011

Ваши теги привязки встроены.Так же, как текст в абзаце, встроенный текст не свернет пробел, а будет уважать его.Установите свои якоря на display:block;float:left;, и пробел должен исчезнуть.

Относительно того, почему Webkit решает сделать это таким образом, я не уверен, но он может пытаться что-то, что обычно работает со встроенным текстом(например, если бы это был просто абзац с подчеркнутыми ссылками).(Почему Opera делает свои странные вещи, для меня снова загадка, но, ну, в общем, для курса Opera.)

2 голосов
/ 21 февраля 2011

Думаю, вы наткнулись на ошибку.Обратите внимание, что если вы увеличите правый отступ элементов привязки, он снова резко увеличится до 11px (padding: 5px 11px 5px 7px).

Вы можете увидеть это еще более отчетливо, если отрегулировать правое заполнение только этого одного якоря (оставляя остальных в 7px).Он все еще будет нарезаться в 16px, но не в 17px.

У меня была такая же проблема, но я не нашел решения.Я думаю, в конце концов, я просто плавал элементы.

0 голосов
/ 11 сентября 2013

Способ, которым я исправил это: 

a {
    display:inline-block;
}

Проверено в Chrome 29

0 голосов
/ 21 февраля 2011

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

...