Firefox добавляет дополнительную ширину с отступом

У меня вопрос относительно CSS в Firefox.

Если я установлю ширину плавающего элемента div, скажем, 200 пикселей, установка отступа слева на 10 пикселей в Firefox добавит эти дополнительные 10 пикселей к ширине. В IE такого нет.

Что вы можете сделать, чтобы Firefox не добавлял дополнительную ширину в div?


padding css firefox
person MadsK    schedule 16.11.2010    source источник
comment
Всегда, но ВСЕГДА создавайте свои макеты в браузере, совместимом со стандартами, таком как FF и Chrome. Затем вернитесь и выясните, в каких местах IE все портит.   -  person Stephen    schedule 16.11.2010
comment
То, что у вас есть, это IE в режиме причуд. FF правильно представляет CSS, используя блочную модель. Узнайте о блочной модели здесь: w3schools.com/css/css_boxmodel.asp. хотите задать еще один вопрос с вашим кодом, мы можем помочь вам его укрепить.   -  person Surreal Dreams    schedule 16.11.2010

Ответы (2)


arrow_upward
8
arrow_downward

Проблема не в firefox, а в IE.

IE не соответствует стандартам, для этого есть несколько хитростей, но все они доставляют неудобства: http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

Самый простой способ — включить допустимый строгий тег doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Затем просто перепишите css для блочной модели, соответствующей стандартам.

Дополнительные типы документов здесь

person J V    schedule 16.11.2010
comment
Правильно, но новые веб-страницы всегда должны использовать строгий тип документа. - person Rob; 16.11.2010
comment
Вы сказали строгие, но написали переходные. - person Surreal Dreams; 16.11.2010

arrow_upward
4
arrow_downward

По умолчанию box-sizing установлен на content-box в Mozilla и border-box в IE.

используя:

-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;

в вашем стиле вы также можете установить размер окна для mozilla, safari и opera в border-box.

для получения дополнительной информации проверьте: http://www.css3.info/preview/box-sizing/< /а>

person Ehsan Shoja    schedule 31.08.2011