我有一个CMS网页,显示了几个多选html元素。 选择框有很多选项。 我的问题是,对于Chrome(版本41.0.2272.101 m&版本42.0.2311.90 m)和Opera(版本:28.0.1750.51),多选元素的选项会溢出。
在Firefox(版本36.0.4)中,多选元素具有垂直滚动条,看起来很好。它在Internet Explorer上看起来也很好(版本11.0.9)
<select multiple="multiple" name="field_countries_and_regions_tid[]" id="edit-field-countries-and-regions-tid" size="9" class="form-select"><option value="533">Caribbean</option><option value="545">-Aruba</option><option value="546">-Bahamas</option><option value="547">-Barbados</option><option value="548">-Bermuda</option><option value="549">-Caribbean Netherlands</option><option value="550">-Cuba</option><option value="551">-Dominica</option><option value="552">-Dominican Republic</option><option value="553">-Grenada</option><option value="554">-Guadeloupe</option><option value="555">-Haiti</option><option value="556">-Jamaica</option><option value="557">-Martinique</option><option value="558">-Montserrat</option><option value="559">-Puerto Rico</option><option value="560">-Saint Kitts And Nevis</option><option value="561">-Saint Lucia</option><option value="562">-Saint Vincent And The Grenadines</option><option value="563">-Trinidad And Tobago</option><option value="564">-Turks And Caicos Islands</option><option value="565">-Virgin Islands, British</option><option value="566">-Virgin Islands, U.S.</option><option value="534">Central America</option><option value="567">-Belize</option><option value="568">-Costa Rica</option><option value="569">-El Salvador</option><option value="570">-Guatemala</option><option value="571">-Honduras</option><option value="572">-Nicaragua</option><option value="573">-Panama</option><option value="535">Central and Eastern Europe</option><option value="574">-Belarus</option><option value="575">-Bosnia And Herzegovina</option><option value="576">-Bulgaria</option><option value="577">-Croatia</option><option value="578">-Cyprus</option><option value="579">-Czech Republic</option><option value="580">-Estonia</option><option value="581">-Greece</option><option value="582">-Hungary</option><option value="583">-Kosovo</option><option value="584">-Latvia</option><option value="585">-Lithuania</option><option value="586">-Macedonia, The Former Yugoslav Republic Of</option><option value="587">-Moldova</option><option value="588">-Monaco</option><option value="589">-Poland</option><option value="590">-Romania</option><option value="591">-Russia</option><option value="592">-Serbia</option><option value="593">-Slovakia</option><option value="594">-Slovenia</option><option value="595">-Ukraine</option><option value="596">-Yugoslavia</option><option value="536">Central Asia and Caucasus</option><option value="597">-Armenia</option><option value="598">-Azerbaijan</option><option value="599">-China</option><option value="600">-Georgia</option><option value="601">-Hong Kong (Special Administrative Region of the People's Republic of China)</option><option value="602">-Kazakhstan</option><option value="603">-Kyrgyzstan</option><option value="604">-Mongolia</option><option value="605">-Tajikistan</option><option value="606">-Turkmenistan</option><option value="607">-Uzbekistan</option><option value="537">East Asia</option><option value="608">-Brunei Darussalam</option><option value="609">-Cambodia</option><option value="610">-East Timor</option><option value="611">-Indonesia</option><option value="612">-Japan</option><option value="613">-Laos</option><option value="614">-Macau</option><option value="615">-Malaysia</option><option value="616">-Myanmar</option><option value="617">-North Korea (DPRK)</option><option value="618">-Philippines</option><option value="619">-Singapore</option><option value="620">-South Korea (ROK)</option><option value="621">-Taiwan, Province Of China</option><option value="622">-Thailand</option><option value="623">-Viet Nam</option><option value="538">Middle East and North Africa</option><option value="624">-Bahrain</option><option value="625">-Iran, Islamic Republic Of</option><option value="626">-Iraq</option><option value="627">-Israel</option><option value="628">-Jordan</option><option value="629">-Lebanon</option><option value="630">-Oman</option><option value="631">-Palestinian Territory, Occupied</option><option value="632">-Qatar</option><option value="633">-Reunion</option><option value="634">-Saudi Arabia</option><option value="635">-Syrian Arab Republic</option><option value="636">-Turkey</option><option value="637">-Yemen</option><option value="539">North America</option><option value="638">-Canada</option><option value="639">-Greenland</option><option value="640">-Mexico</option><option value="641">-Saint Pierre And Miquelon</option><option value="642">-United States of America</option><option value="540">Pacific</option><option value="643">-American Samoa</option><option value="644">-Australia</option><option value="645">-Cook Islands</option><option value="646">-Fiji</option><option value="647">-French Polynesia</option><option value="648">-Guam</option><option value="649">-Kiribati</option><option value="650">-Nauru</option><option value="651">-New Caledonia</option><option value="652">-New Zealand</option><option value="653">-Niue</option><option value="654">-Norfolk Island</option><option value="655">-Northern Mariana Islands</option><option value="656">-Palau</option><option value="657">-Papua New Guinea</option><option value="658">-Pitcairn</option><option value="659">-Samoa</option><option value="660">-Solomon Islands</option><option value="661">-Tokelau</option><option value="662">-Tonga</option><option value="663">-Tuvalu</option><option value="664">-United States Minor Outlying Islands</option><option value="665">-Vanuatu</option><option value="666">-Wallis And Futuna</option><option value="541">South America</option><option value="667">-Argentina</option><option value="668">-Bolivia</option><option value="669">-Brazil</option><option value="670">-Chile</option><option value="671">-Colombia</option><option value="672">-Ecuador</option><option value="673">-Falkland Islands (Malvinas)</option><option value="674">-French Guiana</option><option value="675">-Guyana</option><option value="676">-Paraguay</option><option value="677">-Peru</option><option value="678">-South Georgia And The South Sandwich Islands</option><option value="679">-Suriname</option><option value="680">-Uruguay</option><option value="681">-Venezuela</option><option value="542">South Asia</option><option value="682">-Afghanistan</option><option value="683">-Bangladesh</option><option value="684">-Bhutan</option><option value="685">-British Indian Ocean Territory</option><option value="686">-Christmas Island</option><option value="687">-Cocos (Keeling) Islands</option><option value="688">-Heard Island And Mcdonald Islands</option><option value="689">-India</option><option value="690">-Maldives</option><option value="691">-Marshall Islands</option><option value="692">-Micronesia, Federated States Of</option><option value="693">-Nepal</option><option value="694">-Pakistan</option><option value="695">-Sri Lanka</option><option value="543">Sub-Saharan Africa</option><option value="696">-Algeria</option><option value="697">-Benin</option><option value="698">-Botswana</option><option value="699">-Burkina Faso</option><option value="700">-Burundi</option><option value="701">-Cameroon</option><option value="702">-Cape Verde</option><option value="703">-Central African Republic</option><option value="704">-Chad</option><option value="705">-Comoros</option><option value="706">-Congo</option><option value="707">-Congo, The Democratic Republic Of The</option><option value="708">-Cote D'ivoire</option><option value="709">-Djibouti</option><option value="710">-Egypt</option><option value="711">-Equatorial Guinea</option><option value="712">-Eritrea</option><option value="713">-Ethiopia</option><option value="714">-Gabon</option><option value="715">-Gambia</option><option value="716">-Ghana</option><option value="717">-Guinea</option><option value="718">-Guinea-Bissau</option><option value="719">-Kenya</option><option value="720">-Lesotho</option><option value="721">-Liberia</option><option value="722">-Libyan Arab Jamahiriya</option><option value="723">-Madagascar</option><option value="724">-Malawi</option><option value="725">-Mali</option><option value="726">-Mauritania</option><option value="727">-Mauritius</option><option value="728">-Mayotte</option><option value="729">-Morocco</option><option value="730">-Mozambique</option><option value="731">-Namibia</option><option value="732">-Niger</option><option value="733">-Nigeria</option><option value="734">-Rwanda</option><option value="735">-Sao Tome And Principe</option><option value="736">-Senegal</option><option value="737">-Seychelles</option><option value="738">-Sierra Leone</option><option value="739">-Somalia</option><option value="740">-South Africa</option><option value="741">-Sudan</option><option value="742">-Swaziland</option><option value="743">-Tanzania</option><option value="744">-Togo</option><option value="745">-Tunisia</option><option value="746">-Uganda</option><option value="747">-Western Sahara</option><option value="748">-Zambia</option><option value="749">-Zimbabwe</option><option value="544">Western Europe</option><option value="750">-Austria</option><option value="751">-Belgium</option><option value="752">-Denmark</option><option value="753">-Faroe Islands</option><option value="754">-Finland</option><option value="755">-France</option><option value="756">-Germany</option><option value="757">-Gibraltar</option><option value="758">-Greenland</option><option value="759">-Holy See (Vatican City State)</option><option value="760">-Iceland</option><option value="761">-Ireland</option><option value="762">-Italy</option><option value="763">-Liechtenstein</option><option value="764">-Luxembourg</option><option value="765">-Malta</option><option value="766">-Netherlands</option><option value="767">-Norway</option><option value="768">-Portugal</option><option value="769">-Saint Helena</option><option value="770">-San Marino</option><option value="771">-Spain</option><option value="772">-Svalbard And Jan Mayen</option><option value="773">-Sweden</option><option value="774">-Switzerland</option><option value="775">-United Kingdom</option></select>
这是css:
element.style {
}
resource-multi-category-searchmedia="all"
select[multiple], select[size] {
height: auto;
}
resource-multi-category-searchmedia="all"
select[multiple], select[size] {
height: auto;
}
resource-multi-category-searchmedia="all"
select {
-webkit-appearance: menulist;
}
resource-multi-category-searchmedia="all"
input.form-text, textarea.form-textarea, select {
background-color: #fcfcfc;
border: 2px solid #eaeaea;
color: #999999;
font-size: 14px;
padding: 14px;
width: 100%;
min-height: 50px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
有没有人对我如何解决这个问题有任何想法?
谢谢,
大卫
***************** UPDATE ************************* 我的公司有一个不同的网站,有多个选择元素,滚动条对于Chrome来说是正常的 即:http://www.elaw.org/resources 在那个页面上,多选元素有一个滚动条,我看不出它们的选择元素和我上面描述的选项之间有任何严重的区别,而选项反而溢出。
答案 0 :(得分:0)
你的问题在于这种风格:
select {
-webkit-appearance: menulist;
}
将menulist
更改为normal
,选择框将正常运行。