Как я могу исправить это странное поведение блочной модели браузеров Webkit? - PullRequest
Новая
       14

Как я могу исправить это странное поведение блочной модели браузеров Webkit?

0 голосов
/ 16 сентября 2011

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

Вот моя ситуация: у меня есть два <aside> с последующим <div>. Все они отображаются рядом друг с другом, <div> слева, затем .#aside-1 и #aside-2. Это достигается с помощью следующего кода CSS: 

aside {
  margin-bottom: 30px;
  padding: 0px 10px 10px;
  width: 180px;
}

#aside-1 {
  float: right;
  margin-left: -400px;
  margin-right: 200px;
}

#aside-2 {
  float: right;
}

div {
  overflow: auto;    /* Block formatting context */

  margin-right: 400px;
  padding: 0px 10px 0px 20px;
}

Это прекрасно работает в Firefox и IE> 6.
Однако в Chrome и Safari происходит то, что margin-right из div не рассчитывается по правой границе, а вместо этого вычисляется только по левому краю aside-2. Это приводит к тому, что div слишком мало для 200 пикселей (ширина + отступ sidebar-2).

Что вызывает такое поведение Webkit и как я могу это исправить?
В любом случае, большое спасибо за вашу помощь заранее!

ОК, поэтому я проверил немного больше и нашел простое решение):

Просто задайте div фиксированную ширину. Это, конечно, работает только в том случае, если ваш макет основан на фиксированной ширине, что и есть для меня.

1 Ответ

0 голосов
/ 16 сентября 2011

Попробуйте с помощью CSS RESET, это должно работать. Вот один из них: http://html5doctor.com/html-5-reset-stylesheet/

...