"Margin: 0 auto;" kullanma Internet Explorer 8'de

Question 1

IE8'de bazı ileri testler yapma sürecindeyim ve görünüşe göre eski kullanma tekniği margin: 0 auto;IE8'de her durumda çalışmıyor.

Aşağıdaki HTML parçası FF3, Opera, Safari, Chrome, IE7 ve IE8'de ortalanmış bir düğme sağlar, ancak IE8 standardında DEĞİLDİR :

<div style="height: 500px; width: 500px; background-color: Yellow;">
    <input type="submit" style="display: block; margin: 0 auto;" />
</div>

(Bir çözüm olarak, düğmeye açık bir genişlik ekleyebilirim).

Yani soru şu: hangi tarayıcılar doğrudur? Yoksa bu, davranışın tanımsız olduğu durumlardan biri mi?

(Benim düşünceme göre tüm tarayıcılar yanlış - "display: block" ise düğme% 100 genişlikte olmamalı mı?)

GÜNCELLEME: Ben bir aptal oluyorum. Girdi, blok düzeyinde bir öğe olmadığından, onu "text-align: center" ile bir div içinde içermeliydim. Bunu söyledikten sonra, merak uğruna, düğmenin yukarıdaki örnekte ortalanıp ortalanmaması gerektiğini hala bilmek istiyorum.

ÖDÜLLER İÇİN: Örnekte tuhaf şeyler yaptığımı biliyorum ve güncellemede belirttiğim gibi, bunu merkeze hizalamalıydım. Ödül için, cevap veren özelliklere referans vermek istiyorum:

"Display: block" u ayarlarsam, düğmenin genişliği% 100 olmalı mı? Yoksa bu tanımsız mı?
Ekran blok olduğundan "margin: 0 auto;" düğmeyi ortalamak mı yoksa değil mi yoksa tanımsız mı?

Question 2

IE8'deki bir hatadır.

İkinci sorunuzla başlayarak: “margin: 0 auto” bir bloğu ortalar, ancak yalnızca bloğun genişliği ebeveynin genişliğinden daha az olacak şekilde ayarlandığında. Genellikle aynı olurlar. Bu nedenle aşağıdaki örnekteki metin ortalanmamıştır.

<div style="height: 100px; width: 500px; background-color: Yellow;">    
    <b style="display: block; margin: 0 auto; ">text</b>
</div>

B öğesinin görüntü stili engelle olarak ayarlandığında, genişliği varsayılan olarak üst öğe genişliğine ayarlanır. CSS spesifikasyonu 10.3.3 Blok düzeyinde, normal akıştaki değiştirilmemiş elemanların nasıl olduğunu açıklar: "" Genişlik "," otomatik "olarak ayarlanırsa, diğer" otomatik "değerler" 0 "olur ve" genişlik ", ortaya çıkan eşitliğin ardından gelir . " Orada bahsedilen eşitlik var

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-sağ-genişlik' + 'margin-sağ' = içeren bloğun genişliği

Bu nedenle, normalde tüm otomatik araçlar, blok genişliğinin, içeren bloğun genişliğine eşit olmasına neden olur.

Ancak, bu hesaplama, değiştirilen bir öğe olan INPUT'a uygulanmamalıdır. Değiştirilen elemanlar 10.3.4 Blok seviyesinde, normal akışta değiştirilen elemanlar kapsamındadır . Buradaki metin: "Genişliğin kullanılan değeri, satır içi değiştirilen öğeler için olduğu gibi belirlenir." 10.3.2 Satır içi, değiştirilen elemanların ilgili kısmı şudur: "genişlik" hesaplanmış bir "otomatik" değerine sahipse ve eleman içsel bir genişliğe sahipse, bu iç genişlik "genişlik" için kullanılan değerdir ".

Sanırım CSS'nin ilgilendiği senaryo IMG öğesi. Bu örnekteki Stackoverflow logosu, tüm tarayıcılar tarafından ortalanacaktır.

<div style="height: 100px; width: 500px; background-color: Yellow;">    
    <img style="display: block; margin: 0 auto; " border="0" src="http://stackoverflow.com/content/img/so/logo.png" alt="">
</div>

INPUT öğesi aynı şekilde davranmalıdır.

Question 3

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

Question 4

Evet, şartnameyi yüzlerce kez okuyabilir ve doğru gelen bir yoruma sahip olana kadar farklı bit ve parçaları birleştirebilirsiniz - ama bu tam olarak tarayıcı satıcılarının yaptığı şey ve bu yüzden bugün bulunduğumuz durumdayız.

Esasen, bir öğeye% 100 genişlik uyguladığınızda, bu ebeveyn bir blok öğesiyse, bu öğenin genişliğinin% 100'üne kadar genişlemesi gerekir. margin: 0 auto;Mevcut genişliğin% 100'ünü kapladığı için artık onu ortalayamazsınız .

Herhangi bir şeyi ortalamak margin: 0 auto;için açık bir genişlik tanımlamanız gerekir. Bir satıriçi öğeyi ortalamak text-align: center;için, üst öğe üzerinde kullanabilirsiniz , ancak ebeveynin başka çocukları varsa, bunun istenmeyen yan etkileri olabilir.

Question 5

Form kontrolleri, CSS'de değiştirilen öğelerdir .

10.3.4 Blok seviyesinde, normal akışta değiştirilen elemanlar

Kullanılan 'genişlik' değeri, satır içi değiştirilen elemanlar için olduğu gibi belirlenir . Ardından, kenar boşluklarını belirlemek için değiştirilmemiş blok düzeyindeki öğeler için kurallar uygulanır.

Bu nedenle bir şekilde kontrol olmamalıdır % 100 genişliğine gerilebilir.

Ancak, gereken ortalanmalıdır. IE8'de sıradan bir hataya benziyor. Belirli bir genişlik ayarlarsanız öğeyi ortalar:

<input type="submit" style="display: block; width:100px; margin: 0 auto;" />

Question 6

Buti-oxa tarafından açıklandığı gibi bu, IE8'in değiştirilen öğeleri işleme biçimiyle ilgili bir hatadır. Düğmenize açık bir genişlik eklemek istemiyorsanız, bunu bir satır içi bloğa değiştirebilir ve içeriği ortalayabilirsiniz:

<div style="height: 500px; width: 500px; background-color: Yellow; text-align: center;">
  <input type="submit" style="display: inline-block;" />
</div>

Bunun, Mozilla'nın satır içi bloğu desteklemeyen eski sürümlerinde (FF2 dahil) çalışmasını istiyorsanız display: -moz-inline-stack;, düğmeye ekleyebilirsiniz .

Question 7

Bu spesifikasyonla ilgili bir "hata" olduğu kadarıyla; değil. Gönderi sorularının yazarı olarak, bunun davranışı "tanımsız" olacaktır çünkü IE'deki bu davranış, spesifikasyona göre yalnızca form kontrollerinde gerçekleşir:

CSS 2.1, hangi özelliklerin form kontrolleri ve çerçeveler için geçerli olduğunu veya CSS'nin bunları biçimlendirmek için nasıl kullanılabileceğini tanımlamaz. Kullanıcı aracıları bu öğelere CSS özelliklerini uygulayabilir. Yazarların bu tür desteği deneysel olarak ele almaları önerilir.

( http://www.w3.org/TR/CSS21/conform.html#conformance )

Şerefe!

Question 8

Bir kez daha: hepimiz IE'den nefret ediyoruz!

<div style="width:100%;background-color:blue;">
    <div style="margin:0 auto;width:300px;background-color:red;">
        Not Working
    </div>
</div>

<div style="width:100%;background-color:green;text-align:center;">
    <div style="margin:0 auto;width:300px;background-color:orange;text-align:left;">
        Working, but dumb that you have to use text-align
    </div>
</div>

Question 9

Yukarıdakilerin hepsini denedim, sonunda bunu yap

<div style="width:100%; background-color:red; text-align:center;">
        <div style="width:900px; margin:0 auto; background-color:blue;">
            hello
        </div>
    </div>

Question 10

Ekle <!doctype html>HTML çıktısı üst kısmında.

Question 11

"display: block" ise düğme% 100 genişlikte olmamalıdır

Hayır. Bu sadece dikey olarak uzayda tek şey olduğu anlamına gelir (oraya başka bir şeyi zorlamak için başka bir numara kullanmadığınızı varsayarsak). Bu, o boşluğun genişliğini doldurması gerektiği anlamına gelmez.

Sanırım bu örnekteki probleminiz, inputdoğal olarak bir blok eleman olmaması. Başka bir div'in içine yerleştirmeyi deneyin ve bunun üzerine marjı ayarlayın. Ancak şu anda bunu test edebileceğim bir IE8 tarayıcım yok, bu yüzden bu sadece bir tahmin.

Question 12

"margin: 0 auto", üst öğe bir "text-align: center" a sahipse, yalnızca bir öğeyi IE'de ortalar.

Question 13

margin: 0 autoÖyleyse, öğenin ortalanması gerektiğini varsayarsak , ancak genişlik olduğu gibi bırakılır - her ne şekilde hesaplanırsa yapılsın, herhangi bir marj ayarı göz ardı edilerek.
<INPUT>Etiketi olarak ayarlarsanız, display:blockile ortalanmalıdır margin: 0 auto.

Daha fazla ayrıntı için Görsel biçimlendirme modeli ayrıntıları - CSS 2.1 özelliklerinden genişliklerin ve kenar boşluklarının hesaplanması bölümüne bakın . İlgili bitler şunları içerir:

Blok biçimlendirme bağlamında, her kutunun sol dış kenarı, içeren bloğun sol kenarına temas eder.

ve

Bir satırdaki satır içi kutuların toplam genişliği, bunları içeren satır kutusunun genişliğinden daha az olduğunda, bunların satır çerçevesi içindeki yatay dağılımı 'metin hizalama' özelliği tarafından belirlenir.

en sonunda

"Genişlik", "otomatik" olarak ayarlanırsa, diğer "otomatik" değerler "0" olur ve "genişlik", ortaya çıkan eşitliğin ardından gelir.

Hem 'margin-left' hem de 'margin-right' 'otomatik' ise, kullanılan değerleri eşittir. Bu, elemanı içeren bloğun kenarlarına göre yatay olarak ortalar.