ekran giriş:blok blok değil, neden olmasın?

SORU

23 HAZİRAN 2009, Salı

ekran giriş:blok blok değil, neden olmasın?

Neden display:block;width:auto; Metin Giriş angut gibi davranır ve kabın genişliğini doldurmak değil mi? Bir dıv sadece otomatik genişliği ile bir blok öğesi olduğunu sanıyordum. Aşağıdaki kodu içinde div ve giriş aynı boyutlarda olması gerekmiyor mu?

Nasıl genişliğini doldurmak için giriş yap. 100% genişlik giriş dolgu ve kenarlık (100% 1px 5px 5px 1px son bir genişlik neden) çünkü işe yaramaz. Sabit genişlikte bir seçenek, bir şey daha esnek arıyorum değil.

Geçici bir çözüm için doğrudan bir cevabı tercih ederdim, bu CSS bir cilvesi gibi görünüyor ve bu anlayış daha sonra yararlı olabilir.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>width:auto</title>

<style>
div, input {
	border: 1px solid red;
	height: 5px;
	padding: 5px;
}
input, form {
	display: block;
	width: auto;
}
</style>
</head>

<body>
    <div></div>
    <form>
    	<input type="text" name="foo" />
    </form>
</body>
</html>

EDİT: zaten sarıcı geçici çözümler ile bunu yapabilirim. belirtmem gerekir Sayfa anlambilim ve CSS seçici ilişkiler ile bu vidalama dışında GİRİŞ kendi doğasını değiştirerek üstesinden gelinebilir olsun sorunun niteliği ve anlamaya çalışıyorum.

EDİT 2: Tamam, bu GERÇEKTEN tuhaf! Çözüm basit width:100%;padding:5px; giriş max-width:100% eklemek olduğunu tespit ettik. Ancak bu bile fazla soru ayrı bir soru soracağım) yükseltir ama genişliği normal CSS kutu modelini kullanır ve max-genişlik IE sınır-kutu modeli kullanan görünüyor. Çok garip.

EDİT 3: Tamam, bu sonuncusu FF3 bir hata gibi görünüyor. IE8 ve Safari4 spec diyor ki 100% doldurma sınırı max-genişliği sınırı. En sonunda, YANİ bir terslik var.

EDİT 4: Aman Tanrım, bu harika! Bu süreçte oyun bu, ve çok yardım saygıdeğer uzmanları Dean Edwards Erik Arvidsson, başardım tamamlamaya 3 ayrı çözümler için gerçek bir çapraz tarayıcı 100% genişliği unsurları ile rasgele doldurma ve sınırları. Aşağıda cevap bakın. Bu çözüm, herhangi bir ekstra HTML sadece bir sınıf (ya da seçici) ve eski IE için isteğe bağlı bir davranış gerektirmez.

CEVAP

23 HAZİRAN 2009, Salı

Ne buldum, bir çözüm nispeten bilinmeyen box-sizing:border-box CSS3, stil kullanarak kontrol edin. Bu bir 'gerçek' 100% bu öğelerin herhangi bir öğe ne olursa olsun' dolgu ve/veya sınırları. genişlik sağlar

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

    <title>Cross-browser CSS box-sizing:border-box</title>

    <style type="text/css">
    form {display:block; margin:0; padding:0; width:50%; border:1px solid green; overflow:visible}
    div, input {display:block; border:1px solid red; padding:5px; width:100%; font:normal 12px Arial}

    /* The voodoo starts here */
    .bb {
        box-sizing: border-box; /* css3 rec */
        -moz-box-sizing: border-box; /* ff2 */
        -ms-box-sizing: border-box; /* ie8 */
        -webkit-box-sizing: border-box; /* safari3 */
        -khtml-box-sizing: border-box; /* konqueror */
    }
    </style>

    <!-- The voodoo gets scary. Force IE6 and IE7 to support IE5's box model -->
    <!--[if lt IE 8]><style>.bb {behavior:url("boxsizing.htc");}</style><![endif]-->
</head>

<body>
  <form name="foo" action="#">
    <div class="bb">div</div>
    <input class="bb" size="20" name="bar" value="field">
  </form>
</body>
</html>

Bu çözümü olmayan piksel yüzdesi diğer genişlikleri destek Dean Edwards bazı düzenlemeler ile bir davranış Erik Arvidsson tarafından yazılmış) IE6 ve IE 7 destekler.

Working example
Behaviour (boxsizing.htc)

Bunu Paylaş: