SORU
25 Mart 2009, ÇARŞAMBA

Seçin sabit genişlik IE içerik keserek açılır

Konu:

Seç bazı öğelerin tam ekran için 145px belirtilen genişliğinden daha fazla gerektirir.

Firefox davranışseç : üzerine tıklayarak en uzun elemanın genişliği için açılan öğeleri listesi ayarlanabilir ortaya koymaktadır.

IE6 VE IE 7 davranışseç : üzerine tıklayarak açılan öğeleri listesi 145px genişliği için imkansız artık öğeleri okuma yapmak yasak koyuyor.

Geçerli UI bize 145px bu açılan fit ve uzun açıklamaları ile ana öğeleri gerektirir.

Herhangi bir IE ile sorunun çözümü konusunda tavsiyelerde?

Üst öğe listesi genişletilmiş olduğunda 145px geniş bile kalmalıdır.

Teşekkür ederim!

Css:

select.center_pull {
    background:#eeeeee none repeat scroll 0 0;
    border:1px solid #7E7E7E;
    color:#333333;
    font-size:12px;
    margin-bottom:4px;
    margin-right:4px;
    margin-top:4px;
    width:145px;
}

İşte seç giriş kodu (şu anda backend_dropbox stil tanımı yok)

<select id="select_1" class="center_pull backend_dropbox" name="select_1">
<option value="-1" selected="selected">Browse options</option>
<option value="-1">------------------------------------</option>
<option value="224">Option 1</option>
<option value="234">Longer title for option 2</option>
<option value="242">Very long and extensively descriptive title for option 3</option>
</select>

Html sayfası hızlı bir tarayıcı test etmek istediğiniz tam:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dropdown test</title>

<style type="text/css">
<!--
select.center_pull {
    background:#eeeeee none repeat scroll 0 0;
    border:1px solid #7E7E7E;
    color:#333333;
    font-size:12px;
    margin-bottom:4px;
    margin-right:4px;
    margin-top:4px;
    width:145px;
}
-->
</style>
</head>

<body>
<p>Select width test</p>
<form id="form1" name="form1" method="post" action="">
<select id="select_1" class="center_pull backend_dropbox" name="select_1">
<option value="-1" selected="selected">Browse options</option>
<option value="-1">------------------------------------</option>
<option value="224">Option 1</option>
<option value="234">Longer title for option 2</option>
<option value="242">Very long and extensively descriptive title for option 3</option>
</select>
</form>
</body>
</html>

CEVAP
22 Aralık 2010, ÇARŞAMBA

IE 8 için css tabanlı basit bir çözümü var:

select:focus {
    width: auto;
    position: relative;
}

(Eğer selectbox sabit büyüklükte bir kaba çocuk ise pozisyon özelliği ayarlamak gerekir.)

Ne yazık ki IE 7 ve daha az desteklemez :seçici odak.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:
HtmlInternet ExplorerCssHtml-Css SeçinInternet-explorer

AYNI ETİKETTEKİ VİDEOLAR

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • HowcastSportsFitness

    HowcastSport

    11 Mayıs 2011
  • Incredible Tutorials

    Incredible T

    27 EKİM 2006
  • ThePhestor

    ThePhestor

    22 Mart 2011

İLGİLİ SORU / CEVAPLAR

İLGİLİ BAĞLANTILAR