Görünüşe göre IE'de genişlik dolgu boyutunu içeriyor. FF'de ise genişlik yok. Her ikisinin de aynı şekilde davranmasını nasıl sağlayabilirim?
Teşekkürler.
Görünüşe göre IE'de genişlik dolgu boyutunu içeriyor. FF'de ise genişlik yok. Her ikisinin de aynı şekilde davranmasını nasıl sağlayabilirim?
Teşekkürler.
Yanıtlar:
IE, daha kullanışlı ama standart olmayan "border-box" kutu modelini kullanıyordu. Bu modelde, bir öğenin genişliği dolgu ve sınırları içerir. Örneğin: geniş
#foo { width: 10em; padding: 2em; border: 1em; }
olacaktır 10em.
Buna karşılık, tüm standartlardan korkan tarayıcılar varsayılan olarak "içerik kutusu" kutu modelini kullanır. Bu modelde, bir elemanın genişliği etmez olmayan dolgu ya da sınırları vardır. Örneğin:
#foo { width: 10em; padding: 2em; border: 1em; }
aslında 16emgeniş olacaktır : her kenar için 10em+ 2emdolgu, 1emher kenar için + kenarlık.
Geçerli biçimlendirmeye , iyi bir belge türüne ve uygun başlıklara sahip modern bir IE sürümü kullanırsanız , bu standartla uyumlu olacaktır. Aksi takdirde, modern standartlarla uyumlu tarayıcıları şu yolla "border-box" kullanmaya zorlayabilirsiniz:
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
İlk bildirim Opera için, ikincisi Firefox için, üçüncüsü Webkit ve Chrome için gereklidir.
İşte tarayıcınızın hangi kutu boyutlandırma beyanını desteklediğini test etmek için yıllar önce yaptığım basit bir test: http://phrogz.net/CSS/boxsizing.html
Webkit'in (Safari ve Chrome) padding-boxherhangi bir bildirim yoluyla kutu modelini desteklemediğini unutmayın .
Basit bir kural, aynı eleman için padding / margin ve width özelliğini kullanmaktan kaçınmaktır. ör. buna benzer bir şey kullanın
<div class="width-div">
<div class="padding-div">
...........
...........
</div>
</div>
Bu soruya rastladım ve birkaç yaşında olmasına rağmen, birinin bu konuya çarpması durumunda bunu ekleyebileceğimi düşündüm.
CSS3 artık bir kutu boyutlandırma özelliğine sahiptir. Eğer ayarlarsan söyle
.bigbox {
box-sizing: border-box;
width: 1000px;
border: 5px solid #333;
padding: 10px;
}
sınıfınız 1030 piksel yerine 1000 piksel genişliğinde olacaktır. Bu, elbette, sıvı div'lerle piksel boyutunda kenarlık kullanan herkes için inanılmaz derecede yararlıdır, çünkü aksi takdirde çözülemeyen bir sorunu çözer.
Daha da iyisi, kutu boyutlandırma, IE7 ve altı hariç tüm büyük tarayıcılar tarafından desteklenir. Genişlik veya yükseklik boyutundaki tüm öğeleri dahil etmek için kutu boyutlandırmayı border-box olarak ayarlayın. To agrega varsayılan genişlik ve / veya yükseklik, diğer öğelerde, "içerik-box" için kutu boyutlandırma ayarlayabilirsiniz.
Tarayıcı sözdiziminin mevcut durumundan emin değilim, ancak yine de -moz ve -webkit öneklerini ekliyorum:
.bigbox{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Açıklanan bir belge türünüz var mı? Html'yi kodlamaya başladığımda bu problemi yaşadım ve bu bir doctype'ın beyan edilmemesinden kaynaklanıyordu. Benim favorim:
<!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>