CSS czy szerokość zawiera dopełnienie?

146

Wygląda na to, że w IE szerokość obejmuje rozmiar wypełnienia. podczas gdy w FF szerokość nie. Jak sprawić, by obie zachowywały się tak samo?

Dzięki.

css

— Jake
źródło

Prawdopodobnie musisz aktywować tryb zgodny ze standardami. Jednak nie widząc kodu, nie mogę dać więcej wskazówek.

— Jeff Hubbard,

307

IE używał wygodniejszego, ale niestandardowego modelu ramki „border-box” . W tym modelu szerokość elementu obejmuje wypełnienie i obramowanie. Na przykład:
#foo { width: 10em; padding: 2em; border: 1em; }
byłby 10emszeroki.
W przeciwieństwie do tego, wszystkie przeglądarki obawiające się standardów domyślnie korzystają z modelu pól zawartości . W tym modelu szerokość elementu nie obejmuje dopełnienia ani obramowań. Na przykład:
#foo { width: 10em; padding: 2em; border: 1em; }
będzie faktycznie 16emszeroki: 10em+ 2emdopełnienie z każdej strony, + 1emobramowanie dla każdej krawędzi.

Jeśli używasz nowoczesnej wersji IE z prawidłowymi znacznikami , dobrym typem dokumentu i odpowiednimi nagłówkami , będzie ona zgodna ze standardem. W przeciwnym razie możesz wymusić na nowoczesnych przeglądarkach zgodnych ze standardami używanie „ramki granicznej” za pomocą:

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

Pierwsza deklaracja jest wymagana dla Opery, druga dla Firefoksa, trzecia dla Webkita i Chrome.

Oto prosty test, który zrobiłem lata temu, aby sprawdzić, jaką deklarację rozmiaru pudełka obsługuje Twoja przeglądarka: http://phrogz.net/CSS/boxsizing.html

Należy pamiętać, że Webkit (Safari i Chrome) nie obsługuje padding-boxmodelu pudełkowego za pośrednictwem żadnej deklaracji.

— Phrogz
źródło

2

+1 za wzmiankę o modelu pola treści i ramki obramowania. Chciałbym jednak omówić różnice.

— BoltClock

1

@BoltClock Dzięki za impuls do bardziej rygorystycznej odpowiedzi. Zaktualizowano.

— Phrogz,

Niezła odpowiedź; Od kilku dni próbuję zapamiętać (lub znaleźć) nazwy różnych opcji ... +1 =)

— David mówi, że przywróć Monikę

Nikogo nie obchodzi opera.

— Michael J. Calkins

3

@whitelettersinblankpapers Zobacz, dlaczego W3Schools jest do bani, a następnie o wiele lepsze odniesienie, które prowadzi do standardu W3C . Nie wybieraj więcej linków do W3Schools. Ponadto dodaj „MDN” do zapytań w wyszukiwarce dotyczących przyszłych standardów sieciowych.

— Phrogz,

27

Prostą zasadą jest unikanie używania właściwości dopełnienia / marginesu i szerokości dla tego samego elementu. tj. Użyj czegoś podobnego do tego

<div class="width-div">
     <div class="padding-div">
     ...........
     ...........
     </div>
 </div>

— shankhan
źródło

Używam tej metody regularnie i nigdy nie mam z nią problemów w różnych przeglądarkach.

— Kevin Beal

20

Natknąłem się na to pytanie i chociaż ma już kilka lat, pomyślałem, że mogę to dodać na wypadek, gdyby ktoś wpadł na ten wątek.

CSS3 ma teraz właściwość rozmiaru pudełka. Jeśli ustawisz, powiedz

.bigbox {
    box-sizing: border-box; 
    width: 1000px; 
    border: 5px solid #333;
    padding: 10px;
}

Twoja klasa będzie miała szerokość 1000 pikseli zamiast 1030 pikseli. Jest to oczywiście niezwykle przydatne dla każdego, kto używa obramowania wielkości piksela w płynnych elementach div, ponieważ rozwiązuje problem nierozwiązywalny w inny sposób.

Co więcej, rozmiary pudełek są obsługiwane przez wszystkie główne przeglądarki z wyjątkiem IE7 i starszych. Aby uwzględnić wszystkie elementy w wymiarze szerokości lub wysokości, ustaw rozmiar pola na border-box. Aby zagregować inne elementy do szerokości i / lub wysokości, która jest wartością domyślną, możesz ustawić rozmiar pola na „content-box”.

Nie jestem pewien aktualnego stanu składni przeglądarki, ale nadal dołączam przedrostki -moz i -webkit:

.bigbox{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

— Mason Barge
źródło

Tak, a Paul Irish ma fajny artykuł na ten temat tutaj: paulirish.com/2012/box-sizing-border-box-ftw

— Dave Burton

Jak ta odpowiedź ma tyle głosów za, skoro jest taka sama, jak ta przyjęta, która została napisana 3 lata wcześniej?

— dippas

1

Czy masz zadeklarowany typ dokumentu? Kiedy zacząłem kodować html, miałem ten problem, a wynikał on z braku deklaracji typu dokumentu. Moim ulubionym jest:

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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
...
</html>

— tybro0103
źródło

1

dla tych, którzy nadal mieliby problem, jQuery dostarczyło dwie właściwości outerWidth ()i innerWitdh ()możliwość poznania szerokości obiektu z obramowaniem lub bez ...

— Patrick
źródło