Sorun

<option>’In metin değerleri çok uzun. onun bir yere <select> var <select> Eğer görüntülenen metin kesmek için varsa bile, ana, daha asla, daha geniş, bu yüzden yeniden boyutlandırmak istiyorum. max-width: 100% bunu yapmak gerekir.

Önce resize:

Ne ben sonra yeniden boyutlandırmak istiyorum:

Ama eğer senload this jsFiddle exampleve yeniden boyutlandırma Sonucu paneli ... ... daha küçük olması için genişlik <select>, <fieldset> içindeki seçin genişliğini küçültün başarısız olduğunu görebilirsiniz.

Aslında boyutlandırma sonra ne görüyorsunuz.

Ancak, equivalent page with a <div> instead of a <fieldset> düzgün Ölçümler yapar. Eğer a <fieldset> and a <div> next to each other on one page varsa test your changes more easily görebilirsiniz. Ve eğer delete the surrounding <fieldset> tags, yeniden boyutlandırma çalışır. <fieldset> etiketi yatay bir şekilde yeniden boyutlandırma kırılmasına neden oluyor.

<fieldset> hareket halinde 18 ** CSS kural ise yok gibi. (min-content, kabaca, taşması için bir çocuk neden olmayan en küçük genişlik anlamına gelir.) Eğer ** 78, <fieldset> yerine eğer tam olarak aynı görünüyordu. Henüz benim stilleri, tarayıcı varsayılan stil, min-content ile kural veya Firebug CSS Müfettiş görünür diye bir şey yok. forms.css, ama bu bir işe yaramadı stil her tarzı Firebug CSS Müfettiş <fieldset> görünür ve Firefox'un varsayılan geçersiz kılmak için çalıştım. Özellikle min-width width ağır basan bir şey yapamadı.

Kod

Alan kümesi HTML:

<fieldset>
    <div class="wrapper">
        <select id="section" name="section">
            <option value="-1"></option>
            <option value="1501" selected="selected">Sphinx of black quartz, judge my vow. The quick brown fox jumps over the lazy dog.</option>
            <option value="1480">Subcontractor</option>
            <option value="3181">Valley</option>
            <option value="3180">Ventura</option>
            <option value="3220">Very Newest Section</option>
            <option value="1481">Visitor</option>
            <option value="3200">N/A</option>
        </select>
    </div>
</fieldset>

Ama çalışması gerektiğini CSS değil:

fieldset {
    /* hide fieldset-specific visual features: */
    margin: 0;
    padding: 0;
    border: none;
}

select {
    max-width: 100%;
}

the defaults 29 *özellikler sıfırlanıyor mu hiç

fieldset {
    width: auto;
    min-width: 0;
    max-width: none;
}

Ayrıca 81* ben *CSS:

/* try lots of things to fix the width, with no success: */
fieldset {
    display: block;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    text-overflow: clip;
}

div.wrapper {
    width: 100%;
}

select {
    overflow: hidden;
}

Daha fazla ayrıntı

Sorun da bu aslında düzeltmeye çalışıyorum web sayfası için daha fazla benzer ** 82, oluşur. <select> sorun değil, o gördüğünüz – ınline-block div da yeniden boyutlandırmak için başarısız olur. Bu örnek, daha karmaşık olmasına rağmen, yukarıda basit vaka düzeltme, daha karmaşık bu durumda çözecek sanırım.

[Edit: tarayıcı desteği ayrıntılar aşağıda.]

Bu sorun hakkında tuhaf bir şey if you set div.wrapper { width: 50%; }, <fieldset> duraklarını noktada kendisini yeniden boyutlandırma sonra tam boyutu <select> görüntüleme çerçevesinin kenarına vurdu. Yeniden boyutlandırma <select> Beğen <select> bakışlar width: 50% olsa bile, 38**, gibi olur.

Bu davranış oluşmaz 84 ** eğer; genişliği doğru olarak ayarlanır.

Bu farklılığın sebebini anlamıyorum. Ancak ilgili olmayabilir.

Ben de çok benzer soru HTML fieldset allows children to expand indefinitely bulundu. Soru soran bir çözüm ve guesses that there is no solution ayrı <fieldset> kaldırmalarını bulamadı. Ama merak ediyorum, Eğer gerçekten imkansız <fieldset> ekran düzeltmek için ise, bu yüzden mi? Ne <fieldset>87 ** default CSS bu davranışa neden? Bu özel davranış, muhtemelen birden fazla tarayıcılarda böyle çalışmak beri bir yerde belirtilmiş olması.

Arka plan amaç ve gereksinimleri

Bunu yapmak için çalışıyorum, bu nedenle büyük bir form sayfası için mobil yazımı bir parçası olarak. Formu çok bölüm var, ve bunun bir parçası <fieldset> sarılır. Bir akıllı telefon (ya da eğer tarayıcı penceresi küçük yaparsanız), <fieldset> ile sayfanın bir parçası şeklinde geri kalanından daha çok daha geniş. Formun en genişliği gayet iyi sınırlar, ama <fieldset> ile bölümünde, kullanıcı uzaklaştırma veya o bölümün hepsi doğru kaydırmak için zorlama değildir.

Sadece büyük bir app birçok sayfalarında oluşturulan <fieldset> kaldırma dikkatli değilim, ve CSS veya JavaScript seçiciler bağlı, ne olduğundan emin değilim.

Eğer ihtiyacım olursa JavaScript kullanabilirim, ve JavaScript bir çözüm hiç yoktan iyidir. Ama eğer JavaScript bunu yapmak için tek yolu ise, bu mümkün sadece CSS ve HTML kullanarak değil neden için bir açıklama duymak çok merak ettim.

Edit: tarayıcı desteği

Site, Internet Explorer ve daha sonra 8 (sadece IE 7 için destek düştü), en son Firefox desteği gerekiyor, ve en son Krom. Bu özel sayfa da iOS ve Android akıllı telefonlar üzerinde çalışmak gerekir. Biraz azaldı ama hala kullanılabilir davranış, Internet Explorer 8 için kabul edilebilir.

Farklı tarayıcılarda my broken fieldset example ben yeniden test. Aslında zaten bu tarayıcılarda çalışır:

• Internet 8, 9, ve 10 Explorer
• Krom
• Chrome Android için

Bu tarayıcılarda kırıyor:

• Firefox
• Firefox Android için
• Internet Explorer 7

Böylece, geçerli kodu sonları umurumda olan tek tarayıcı Firefox, masaüstü ve taşınabilir). Eğer kodu başka tarayıcılarda bozmadan Firefox işe yaradı yani sabit olsaydı, bu benim sorunumu çözer.

Site HTML şablonu Internet Explorer koşullu yorumları <html> öğe sınıfları .ie8 .oldie bu tür eklemek için kullanır. Eğer IE stil farklılıkları gidermek için gerekirse CSS bu sınıfları kullanabilirsiniz. Sınıflar this old version of HTML5 Boilerplate aynıdır ekledi.

Düzeltme

Y, -webkit-min-content varsayılan değeri geçersiz kılmak için alan kümesi üzerinde min-width: 0; ayarlayın. (Ne yazık ki, Android 4.1.2 Stok Tarayıcı ve muhtemelen diğer benzer şekilde eski sürümlerinde, bu hiçbir etkisi yoktur.)

Firefox, ancak kümelerinin gelince biraz tuhaf bir yer. Düzeltme, aşağıdaki değerlerden birini alan kümesi display özelliğini değiştirmek için:

• table-cell(önerilir)
• table-column
• table-column-group
• table-footer-group
• table-header-group
• table-row
• table-row-group

Bu, table-cell tavsiye ederim. table-row table-row-group table-column table-column-group yükseklik değiştirmesini önlemek ise değişen genişlik engel.

Bu (oldukça makul YANİ işleme kıracak. Gecko bu ihtiyacı olduğundan sadece, haklı olarak Mozilla's proprietary CSS extensionsdiğer tarayıcılardan gizlemek @-moz-document—birini kullanabilirsiniz:

@-moz-document url-prefix() {
    fieldset {
        display: table-cell;
    }
}

(Burada bir jsFiddle demo.)

İşler giderir, ama eğer benim gibi bir şey yapıyorsanız tepki gibi bir şey

What.

Yokbir neden, ama çok değil.

Öncelikle, alan kümesi öğesi varsayılan sunum ve CSS belirtmek için saçma aslında imkansız. Alan kümesi sınır efsane bir element ile çakışan bir yerde kaybolur, ama arka plan görünür kalır! bunu bir düşün: Öğeleri diğer herhangi bir kombinasyonu ile bu yeniden oluşturmak için bir yol var.

Üstüne üstlük, uygulamaları eski davranışlarına taviz ağzına kadar dolu. Böyle bir alan kümesi minimum genişlik asla içeriğinin iç genişliğinden daha az olmasıdır. Y varsayılan stil olarak belirterek, bu davranışı geçersiz kılmak için bir yol sağlar, ama Gecko1 bir adım daha ileri gider ve enforces it in the rendering engine.

Ancak, iç elementlerin Gecko special frame type oluşturmaktadır. display bu değerler kümesi elemanları için boyutsal kısıtlamalar ** 97, tamamen zorunlu minimum genişlik kümelerinin empoze engellemeyi hesaplanır.

Ayrıca eski davranışlarına dayanan varolan siteler mola vermeyecek bir kanıt göstermeden yamaları kabul etmeye ikna etmek zor olabilir ama open bug for this herkes var.

Yasal Uyarı

Bu bir kopya. Benim görüşüme göre, haklı ve nispeten güvenli.

• Sadece Gecko kümelerinin bu şekilde davranır, özel Gecko bir özelliği de benzersiz ve istenmeyen bir şekilde anlaşıldığı Gecko davranışa geçici bir çözüm olarak anlaşıldığı Gecko bir davranış hedef için kullanıyoruz.

• Geko hack hedef etrafında bir süre olmuştur. Gecko issues2 hedef için bir araç olarak yaygın kullanımına verilen Mozilla çıkarmadan konuda muhafazakar olacağına inanıyorum.

• Alan kümesi davranış değişiklikleri direnç endişe duyduğum için eski desteği için bir araya eğilimindedir.

• Nasıl temel düzen verilir, şiddetle iç elementlerin boyutlarını hesaplamak için codepath önemli ölçüde yakın gelecekte değişmiş olacağını sanmıyorum.

Eğer bu yaklaşım ile rahat iseniz karar sizin. Açıklama yukarıda sana uygun olduğunu kabul etmek yokuşlarda umarım.

Bu cevap Gecko kaynak 1 Tüm bağlantılar 5065fdc12408 changeset, taahhüt 29ᵗʰ Temmuz 2013; most recent revision from Mozilla Central ile notları karşılaştırmak isteyebilirsiniz bakın.

2 örneğin BkzSO #953491: Targeting only Firefox with CSSveCSS Tricks: CSS hacks targeting Firefoxyüksek profil sitelerinde yaygın olarak başvurulan açıklamalar için.