Проблема с процентной шириной в Opera - PullRequest
Новая
       42

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

7 голосов
/ 17 августа 2011

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

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

example of Opera browser not render something the percentage width it should be

Вот 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>

Ответы [ 2 ]

15 голосов
/ 17 августа 2011

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

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

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

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

0 голосов
/ 17 августа 2011

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

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

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

условная CSS - это библиотека, которая поможет вам в этом, но в Интернете есть еще много вариантов.

Удачи

...