Проблема с процентной шириной в Opera

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

Кто-нибудь знает, как заставить Opera отображать ширину так же, как и в других браузерах?

пример браузера Opera не отображает что-то в процентном соотношении, которое должно быть

Вот CSS и HTML, которые я использую для этой демонстрации.

.show_grid {
  background: url(../img/grid.gif) no-repeat center top;
}

html, body{
  margin: 0;
  padding: 0;
}
.container {
  width: 92%;
  margin-left: auto;
  margin-right: auto;
  max-width: 936px;
  padding-top: 15%;
}
.box {
  width: 15.633%;
  background: #006;
  color: #999;
  margin: 5% .55%   
}


<div class="container show_grid">
  <div class="box">2 column - browser name</div>
</div>

css cross-browser opera fluid-layout
person Paul Sheldrake    schedule 17.08.2011    source источник

Ответы (2)


arrow_upward
15
arrow_downward

Opera округляет проценты widths, но не округляет процентные значения отступов и полей.

Итак, самый простой способ — установить width: 15% и добавить padding-right:.633%. Но при этом только блок будет больше визуально.

Если вы хотите, чтобы его ширина была справедливой, чтобы все дочерние элементы имели одинаковую ширину, вам нужно добавить еще одну оболочку и добавить к ней соответствующее отрицательное поле. Рассчитывается по такой формуле: 100/width*padding, в вашем случае: 100/15*0.633. Компенсировало бы набивку и все было бы круто.

Вот скрипт со всеми вариантами: http://jsfiddle.net/kizu/8q23d/ — фиксированная ширина в пикселях, блок с width:15.633%, первое визуальное исправление и правильное исправление в конце.

person kizu    schedule 17.08.2011
comment
Спасибо за ваш ответ. Жаль, что это нужно исправлять, добавляя больше разметки. - person Paul Sheldrake; 18.08.2011
comment
Большое спасибо за этот ответ! = Д - person jonathancardoso; 06.03.2012

arrow_upward
0
arrow_downward

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

Вы можете попробовать отказаться от использования процентных значений и перейти на «эластичный» макет. В этом случае вы указываете минимальную ширину и максимальную ширину для ваших блочных элементов. Статья об эластичном макете находится здесь и кое-что еще здесь

В качестве альтернативы вы можете определить браузер через javascript или через библиотеку и использовать условные файлы CSS. Это мой любимый подход при работе с IE.

условный css — это библиотека, которая поможет вам в этом, но в Интернете есть много других вариантов. .

Удачи

person Rdpi    schedule 17.08.2011
comment
Спасибо за ответ, я раньше не видел эту условную библиотеку CSS. - person Paul Sheldrake; 18.08.2011