Почему в Safari5 есть непреднамеренное право на отступ?

Меня интересует странное поведение рендеринга в Safari 5.1. В двухколоночном макете первая колонка имеет фиксированную ширину, а вторая должна занимать оставшуюся часть.

HTML:

<div class="row">
    <div class="left">
        <p>Left</p>
    </div>
    <div class="right">
        <p>Right. Some more text here, to show how odd the line breaks...</p>
    </div>
</div>

CSS:

.row { width: 300px; background: yellow; overflow: hidden; }
.left { width: 100px; background: red; float: left; }
.right { margin-left: 100px; background: green; overflow: hidden; }

Это прекрасно работает в большинстве браузеров (во всех «современных» браузерах, как я думал), но теперь я обнаружил, что Safari 5 добавляет непреднамеренное правое поле во второй столбец той же ширины, что и предполагаемое левое поле (как будто там были .right { margin-right: 100px; } правилом).

http://jsfiddle.net/MvF3V/1

Большинство браузеров:

введите здесь описание изображения

Safari5: (проверено на 5.1.7, но встречается и на 5.1.9)

введите здесь описание изображения

Когда я удаляю overflow: hidden;, он работает нормально, но мне это нужно для других внутренних элементов.

Мой вопрос не в том, как изменить этот небольшой пример, а в следующем:

  1. Является ли это ошибкой Safari-5 или мои правила CSS как-то неверны, даже если они «работают» в большинстве браузеров?
  2. Если это ошибка, есть ли у нее имя, с помощью которого я могу поискать обходные пути?
  3. Могу ли я каким-то образом определить, на какие браузеры влияет такое поведение, чтобы определить для них некоторые правила исключения.

Обновление: стандартный браузер Android (Galaxy S3, AppleWebKit 534.30), похоже, использует тот же старый движок webkit. Появляется такое же странное правое поле: http://jsfiddle.net/MvF3V/1/embedded/result/


css safari webkit css-float android-browser
person Beat Sprenger    schedule 17.01.2014    source источник
comment
Вам нужно переполнение: скрытый, чтобы очистить поплавок. Правильно ?   -  person richa_pandey    schedule 17.01.2014
comment
@Эра: Точно. Мне нравится очищать поплавки с помощью overflow: hidden;. Я мог бы использовать решение для очистки, но все же мне любопытно, почему происходит этот странный рендеринг.   -  person Beat Sprenger    schedule 17.01.2014
comment
это может быть ошибка сафари. да, вы можете сделать это альтернативным jsfiddle.net/MvF3V/2   -  person richa_pandey    schedule 17.01.2014
comment
@BeatSprenger: This works great on most browsers...что ты имеешь в виду??? я сомневаюсь, что это ошибка браузера .... можете ли вы подробнее рассказать о выделенной части, потому что вы не используете какой-либо css3/vendor-prefix, поэтому он должен работать во всех браузерах!!   -  person NoobEditor    schedule 17.01.2014
comment
@Era: общий совет, лучшая подруга....hard-reset никогда не предлагается, как вы показали в своей скрипке !! :)   -  person NoobEditor    schedule 17.01.2014
comment
@BeatSprenger: проверьте, нормально ли работает эта скрипка в сафари, если да… у вас есть проблема css в вашей текущей разметке => jsfiddle.net/szMRH/1   -  person NoobEditor    schedule 17.01.2014
comment
@NoobEditor: это сработает, но не реагирует на родительский div. Кстати, хорошо принял ваш совет. Благодарю.   -  person richa_pandey    schedule 17.01.2014
comment
@Era: Да, спасибо. Это работает. Скорее всего так и будет, изменю разметку, чтобы и в Safari5 хорошо выглядело.   -  person Beat Sprenger    schedule 17.01.2014
comment
@NoobEditor: с this works great on most browsers я пытаюсь сказать во всех браузерах, включая Safari 7 и Safari 6, но не в Safari 5 (который по-прежнему является самой популярной версией Safari согласно gs.statcounter.com). Я тоже сомневаюсь, что это баг браузера, поэтому ищу объяснения, которых нигде не могу найти. Конечно, есть обходные пути, такие как решение @Eras. Мне любопытно, если кто-то еще знает об этой проблеме. Если нет, вы и Era можете сформулировать свои обходные пути в качестве ответов, которые я затем приму... Большое спасибо!   -  person Beat Sprenger    schedule 17.01.2014

Ответы (2)


arrow_upward
3
arrow_downward

Дать

padding-left: 100px;

вместо

margin-left: 100px;
person Ravi Gadhiya    schedule 17.01.2014
comment
Но это добавит отступ внутри моего правого столбца (см. jsfiddle.net/MvF3V/3), чего я не хочу. Я установил margin-left: 100px, чтобы содержимое правого столбца не плавало вокруг левого столбца, если правый столбец выше левого. - person Beat Sprenger; 17.01.2014

arrow_upward
0
arrow_downward

Кажется, это действительно ошибка в старых версиях Webkit. Я нашел еще один вопрос по той же проблеме.

Есть обходные пути. Наиболее очевидным является избегать overflow: hidden для очистки поплавков и вместо этого использовать clearfix.

Так как на мои вопросы никто не ответил, попробую дать их сам:

Это Safari-5-Bug?

Это ошибка вебкита

Если это ошибка, есть ли у нее имя, с помощью которого я могу поискать обходные пути?

Имя не найдено, видимо, не так много людей, которые вёрстывают сайты так, как я... (и всё ещё хотят поддерживать старые браузеры).

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

Если вы действительно хотите определить исключения, вы можете сделать такие уродливые вещи в JavaScript

var webkitCheck = /AppleWebKit\/([0-9.]+)/.exec(navigator.userAgent);
if (webkitCheck) {
    var webkitVersion = parseFloat(webkitCheck[1]);
    if (webkitVersion < 535) {
        jQuery('html').addClass('oldWebkit');
    }
}

< 535, потому что 534.59.10 — это Webkit-версия последней версии Safari5, а в Safari6 эта ошибка больше не возникает.

Но спасибо @Era и @NoobEditor за ваши комментарии.

person Beat Sprenger    schedule 23.01.2014