Блочная модель Google Chrome

Hol1killer · May 30, 2013

Столкнулся с проблемой блочой модели google chrome

html


<div class="mainmenu">
<div class="mainmenu-wrapper">
// меню
</div>
</div>

CSS


.mainmenu { width:960px; margin:0 auto; font-family:Arial, Helvetica, sans-serif; border:1px #6F6FFF double; box-shadow:0 0 10px #CCC; -moz-box-shadow:0 0 10px #CCC; -webkit-box-shadow:0 0 10px #CCC; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;}
.mainmenu-wrapper { padding:2px; border:1px #B3D9FF solid; border-radius:5px; }

на выходе получаю в chrome что ширина блока mainmenu 962px а в остальных браузерах 960px

ширина блока mainmenu-wrapper в chrome 958px а в остальных браузерах 952px

что-то я раньше не замечал таких различий, доктайп стоит:

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

Версия chrome 27.0.1453.94 m

Edited May 30, 2013 by Hol1killer

red4pony · May 30, 2013

Фактическая ширина .mainmenu = width + margin-left + margin-right + padding-left + padding-right + border-left + border-right = 960 + 0 + 0 + 0 + 0 + 1 + 1 = 962 *

Фактическая ширина .mainmenu-wrapper = 960px /*width родителя*/

А вот ширина контента .mainmenu-wrapper = width** - margin-left - margin-right - padding-left - padding-right - border-left - border-right = 960 - 0 - 0 - 2 - 2 - 1 - 1 =954px;

* справедливо для всех браузеров кроме IE7- (при блочной модели по умолчанию)

** width - ширина контента родителя (.mainmenu)

Ссылка

Edited May 30, 2013 by red4pony

Sign In

Блочная модель Google Chrome

Question

Hol1killer

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

red4pony

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information