Sorun
Ben <select>burada onun <option>metin değerlerinden biri çok uzun. <select>Görüntülenen metnini kesmek zorunda olsa bile yeniden boyutlandırılmasını istiyorum . max-width: 100%bunu yapmalı.
Yeniden boyutlandırmadan önce:
Yeniden boyutlandırdıktan sonra ne istiyorum:
Ancak bu jsFiddle örneğini yüklerseniz ve Sonuç panelinin genişliğinden daha küçük olacak şekilde yeniden boyutlandırırsanız, içindeki seçimin genişliğini küçültemediğini<select> görebilirsiniz <fieldset>.
Yeniden boyutlandırdıktan sonra gerçekte gördüğüm şey:
Ancak, do <div>yerine eşdeğer sayfa<fieldset> düzgün ölçeklenir. Bunu görebilir ve daha kolay değişiklikleri test varsa bir <fieldset>ve bir <div>tek sayfada yan yana . Ve çevresindeki <fieldset>etiketleri silerseniz , yeniden boyutlandırma çalışır. <fieldset>Etiket nasılsa yatay yeniden boyutlandırma kırmaya neden oluyor.
Gerçekler <fieldset>sanki bir CSS kuralı varmış gibi fieldset { min-width: min-content; }. ( min-contentVasıta, kabaca, en küçük genişlik taşma için bir çocuk yol açmadığını.) Ben değiştirin <fieldset>bir ile <div>birliktemin-width: min-content , tam olarak aynı görünüyor. Yine min-contentde stillerimde, tarayıcı varsayılan stil sayfasında veya Firebug'un CSS İnceleyicisinde görünen bir kural yok . <fieldset>Firebug'un CSS Inspector'ında ve Firefox'un varsayılan stil sayfası forms.css'de görünen her stili geçersiz kılmaya çalıştım , ancak bu yardımcı olmadı. Özellikle geçersiz kılma min-widthve widthhiçbir şey yapmadı.
kod
Alan kümesinin HTML'si:
<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>
Çalışması gereken ancak olmayan CSS'm:
fieldset {
/* hide fieldset-specific visual features: */
margin: 0;
padding: 0;
border: none;
}
select {
max-width: 100%;
}
widthÖzelliklerin varsayılanlara sıfırlanması hiçbir şey yapmaz:
fieldset {
width: auto;
min-width: 0;
max-width: none;
}
Hangi CSS hangi denemek ve sorunu çözmek için başarısız :
/* 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 detay
Sorun , aslında düzeltmeye çalıştığım web sayfasına daha benzer olan bu daha kapsamlı, daha karmaşık jsFiddle örneğinde de ortaya çıkıyor . <select>Sorunun bu olmadığını görebilirsiniz - bir satır içi blok divda yeniden boyutlandırılamaz. Bu örnek daha karmaşık olsa da, yukarıdaki basit durum için düzeltmenin de bu daha karmaşık durumu düzelteceğini varsayalım.
[Düzenle: aşağıdaki tarayıcı desteği ayrıntılarına bakın.]
Bu sorunla ilgili ilginç bir şey, belirlersenizdiv.wrapper { width: 50%; } , <fieldset>noktada yeniden boyutlandırılan durakların tam boyutun <select>görünüm penceresinin kenarına çarpmasıdır. Yeniden boyutlandırma, <select>sahip gibi görünüyor width: 100%olsa da, <select>sahip gibi olur width: 50%.
Eğer varsa vermek <select>kendisiwidth: 50% bu davranış oluşmaz; genişlik basit bir şekilde ayarlanmıştır.
Bu farkın nedenini anlamıyorum. Ancak konuyla ilgili olmayabilir.
HTML alan kümesinin çocukların süresiz olarak genişlemesini sağlayan çok benzer bir soru da buldum . Asker bir çözüm bulamadı ve bu çözümü kaldırmak dışında bir çözüm olmadığını tahmin ediyor<fieldset> . Ama merak ediyorum, eğer <fieldset>ekranı doğru yapmak gerçekten imkansızsa , neden böyle? Ne <fieldset>bireyin Spec veya varsayılan CSS ( Bu sorunun itibariyle ) bu davranışı neden olur? Bu özel davranış muhtemelen bir yerde belgelenmiştir, çünkü birden fazla tarayıcı bu şekilde çalışır.
Arka plan hedefi ve gereksinimleri
Bunu yapmaya çalışmamın nedeni, büyük bir forma sahip mevcut bir sayfa için mobil stiller yazmanın bir parçası. Formun birden çok bölümü vardır ve bir bölümü a <fieldset>. Bir akıllı telefonda (veya tarayıcı pencerenizi küçük yaparsanız) sayfanın bir kısmı <fieldset>formun geri kalanından çok daha geniştir. Formun çoğu genişliğini iyi sınırlar, ancak ile olan bölüm <fieldset>, kullanıcıyı bu bölümü görmek için uzaklaştırmaya veya sağa kaydırmaya zorlamaz.
<fieldset>Büyük bir uygulamadaki birçok sayfada oluşturulduğu için basitçe kaldırmaya dikkat ediyorum ve CSS veya JavaScript'teki hangi seçicilerin buna bağlı olabileceğinden emin değilim.
Gerekirse JavaScript kullanabilirim ve bir JavaScript çözümü hiç yoktan iyidir. Ancak JavaScript bunu yapmanın tek yolu ise, bunun neden sadece CSS ve HTML kullanarak mümkün olmadığını açıklayan bir açıklama duymak isterim.
Düzenle: tarayıcı desteği
Sitede, Internet Explorer 8 ve sonraki sürümlerini (IE7 desteğini yeni bıraktık), en yeni Firefox'u ve en son Chrome'u desteklemem gerekiyor. Bu belirli sayfa iOS ve Android akıllı telefonlarda da çalışmalıdır. Internet Explorer 8 için biraz bozulmuş ancak yine de kullanılabilir davranış kabul edilebilir.
Kırık fieldsetörneğimi farklı tarayıcılarda yeniden test ettim . Aslında bu tarayıcılarda zaten çalışıyor:
- Internet Explorer 8, 9 ve 10
- Krom
- Android için Chrome
Bu tarayıcılarda kırılıyor:
- Firefox
- Android için Firefox
- Internet Explorer 7
Bu nedenle, geçerli kodun kırıldığı umurumdaki tek tarayıcı Firefox'tur (hem masaüstü hem de mobil cihazlarda). Kod, başka bir tarayıcıda kırılmadan Firefox'ta çalıştı, bu yüzden sorunumu çözecekti.
Site HTML şablonu tür sınıfları eklemek için Internet Explorer koşullu yorum kullanır .ie8ve .oldiehiç <html>eleman. IE'de stil farkları üzerinde çalışmanız gerekiyorsa bu sınıfları CSS'nizde kullanabilirsiniz. Eklenen sınıflar , HTML5 Boilerplate'in bu eski sürümü ile aynıdır .
<fieldset>(veya div.wrapper) ve select { width:100% }. max-widthöğeye üst öğesinin orijinal genişliğinin % bir kısmını veriyor gibi görünür , ardından ölçeklenmez, üst öğeyle widthbirlikte ölçeklenir. Bunun istediğini yapacağını düşünüyorum (ama yanlış anlayabilirdim). Daha karmaşık kemanınızda, sol sütundaki alanlara% genişlik ve minimum piksel genişliği vermeyi deneyin. Ardından sağdaki alanları% 100 - (sol alanlar -% - genişlik)% genişliğine verin.