Ошибка поплавка в хроме? 1px дополнительная обивка, но это не обивка

Question

В следующих html и css показаны два элемента div внутри контейнера.Левый div не плавает;правый div смещается вправо.

Правый div кажется на один пиксель слишком узким, и поэтому в этом пиксельном промежутке просвечивает красный цвет фона контейнера.

Этоупрощение моей проблемы.http://jsfiddle.net/XPd9J/

HTML

<div class="inner-wrapper">

    <div class="right-sidebar">
        &nbsp;
    </div>

    <div class="content">
        &nbsp;<br /><br />
    </div>

</div>​

CSS

.inner-wrapper {
    position:relative;
    background-color:red;
    overflow:auto;
    width:90%;
    padding:0;
    margin:20px 0 0 20px;
}
.right-sidebar {
    position:relative;
    width:40% !important;
    background-color:lime;
    float:right;
    margin:0;
    padding:0;
}
.content {
    position :relative;
    width:60%;
    background-color:silver;
    margin:0;
    padding:0;
}
​

Answer 1

Проблема не в поплавке.Это процентная ширина.В FF и IE он работает отлично, но Chrome рассчитывает процентную ширину так, что не всегда пиксели суммируются до полных 100%.Просто попробуйте немного изменить ширину окна, и вы заметите, что лишние 1 пиксель исчезают / появляются иногда.

Как избежать такого поведения?Вам нужно как-то использовать один и тот же процент, так что он рассчитывается точно так же.Правая боковая панель имеет ширину 40%, поэтому вам нужно иметь правое поле 40% для содержимого div (эти 40% составляют 40% содержащего элемента блока)

http://jsfiddle.net/XPd9J/1/

.inner-wrapper {
    background-color:red;
    overflow:auto;
    width:90%;
    padding:0;
    margin:20px 0 0 20px;
}
.right-sidebar {
    width:40% !important;
    background-color:lime;
    float:right;
    margin:0;
    padding:0;
}
.content {
    background-color:silver;
    margin:0 40% 0 0;
    padding:0;
}
​

Answer 2

Другой простой способ получить все 100% - установить родительский элемент на overflow:hidden, а ваш элемент на width:101%.

.

Answer 3

Я также столкнулся с этой проблемой, и я использую два параметра display:inline-table и display:table-cell в родительском div для плавающих элементов. Хотя это не таблица, я использую это как альтернативу

Answer 4

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

Контейнерный блок

ширина правой боковой панели: 30%; плавание: справа; поле: 0; отступ: 0;

ширина содержимого: 40%; с плавающей точкой: справа; поле: 0; отступ: 0;

left-sidebar margin-right: 70%; поле: 0; отступ: 0;

Конечный контейнер div

При условии, что все контейнеры имеют поле: 0; отступы: 0; тогда это работает в FF, IE, Chrome, Safari и Opera (последняя версия) без проблем. Genius. Изворотливым браузерам следовало бы решить эту проблему давным-давно - можно только догадываться, что веб-дизайнерам часто не требуется идеальное размещение пикселей на боковых панелях, иначе это создало бы огромное давление на разработчиков браузеров.

Answer 5

Установить «внутреннюю обертку» на скрытое переполнение (на всякий случай).Затем в правом div используйте исправление calc (40% + 1px).

Answer 6

У вас там два неразрывных пробела. & NBSP; символ вызывает дополнительный пробел в 1 пиксель слева от правой боковой панели. Кстати, position: relative избыточен в этом контексте (это полезно только тогда, когда вам нужно что-то исправить в IE6).