有没有办法用CSS来增强一个HTML＆LT;选择＆GT;其＆LT;选项＆GT;在IE 6？ [英] Is there a way to enhance by CSS an HTML <select> and its <option> on IE 6?

问题描述

Internet Explorer 6中似乎完全忽略选择，选项或OPTGROUP标签CSS类或规则。

有没有一种方法可以绕过这个限制（除了安装最新版本的IE）？

修改：要更precise，我试图建立这样的例子选项之间的层​​级：

下面的HTML片段：

 ＆LT;选择名称=hierarchicalList多个=多​​＆GT;
  ＆LT;选项类=组niv0＆GT;操​​作系统开发商＆LT; /选项＆GT;
  ＆LT;选项类=组niv1＆GT; Linux和LT; /选项＆GT;
  ＆LT;选项类=用户niv2＆GT;林纳斯·托瓦兹＆LT; /选项＆GT;
  ＆LT;选项类=用户niv2＆GT;艾伦·考克斯＆LT; /选项＆GT;
  ＆LT;选项类=组niv1＆GT; Windows和LT; /选项＆GT;
  ＆LT;选项类=用户niv2＆GT;保罗·艾伦＆LT; /选项＆GT;
  ＆LT;选项类=用户niv2＆GT;比尔·盖茨＆LT; /选项＆GT;
  ＆LT;选项类=组niv1＆GT; MAC OS＆LT; /选项＆GT;
  ＆LT;选项类=用户niv2＆GT;史蒂夫Wozniaz＆LT; /选项＆GT;
＆LT; /选择＆GT;
 

和这里的CSS规则，在最近的一个浏览器（如FF3）工作正常，但不是在IE6工作都：

 选择选项{
   行高：10px的;
 } 选择option.group {
    字体重量：大胆的;
    背景：网址（path_to_group_icon.gif）不重复;
    填充左：18像素;
 } 选择option.user {
    背景：网址（path_to_user_icon.gif）不重复;
    填充左：18像素;
 } 选择option.niv0 {保证金左：0像素; }
 选择option.niv1 {保证金左：10px的; }
 选择option.niv2 {保证金左：20像素; }
 

解决方案

这不会做你想要什么，但不是使用CSS，你可以只使用了一些

 ＆放大器; NBSP;
 

对于缩进，左右破折号：

1级

- 第2层

- 3级

等。

如果你不是特别喜欢，你可以与他们周围

 ＆LT;！ -  [如果LT IE 7＆GT;＆LT;！[ENDIF]  - ＆GT;
 

或

 ＆LT;！ -  [如果IE 6＆GT;＆LT;！[ENDIF]  - ＆GT;
 

因此​​，它看起来像

 等级1
＆LT;！ -  [如果LT IE 7] GT;  - ＆LT;！[ENDIF]  - ＆gt;级2
＆LT;！ -  [如果LT IE 7] GT;  - ＆LT;！[ENDIF]  - ＆GT; 3级
 

然后，你可以为现代浏览器的CSS。

Internet explorer 6 seems totally ignore CSS classes or rules on select, option or optgroup tags.

Is there a way to bypass that limitation (except install a recent version of IE) ?

Edit : to be more precise, I'm trying to build a hierarchy between options like that example:

Here's the HTML snippet :

<select name="hierarchicalList" multiple="multiple">
  <option class="group niv0">Os developers</option>
  <option class="group niv1">Linux</option>
  <option class="user niv2">Linus Torvald</option>
  <option class="user niv2">Alan Cox</option>
  <option class="group niv1">Windows</option>
  <option class="user niv2">Paul Allen</option>
  <option class="user niv2">Bill Gates</option>
  <option class="group niv1">Mac Os</option>
  <option class="user niv2">Steve Wozniaz</option>
</select>

And here's CSS rules, that works fine on a recent browser (like FF3) but not working at all on IE6 :

 select option {
   line-height: 10px;
 }

 select option.group {
    font-weight: bold; 
    background: url(path_to_group_icon.gif) no-repeat; 
    padding-left: 18px;
 }

 select option.user {
    background: url(path_to_user_icon.gif) no-repeat; 
    padding-left: 18px;
 }

 select option.niv0 { margin-left: 0px; }
 select option.niv1 { margin-left: 10px; }
 select option.niv2 { margin-left: 20px; }

解决方案

This won't do exactly what you want, but rather than using CSS, you could just use a number of

&nbsp ;

for the indents, or dashes so:

Level 1

-Level 2

--Level 3

etc.

If you don't particularly like that, you could surround them with

<!--[if lt IE 7]><![endif]-->

or

<!--[if IE 6]><![endif]-->

So it would look like

Level 1
<!--[if lt IE 7]>-<![endif]-->Level 2 
<!--[if lt IE 7]>--<![endif]--> Level 3

Then you could have the CSS for modern browsers.

这篇关于有没有办法用CSS来增强一个HTML＆LT;选择＆GT;其＆LT;选项＆GT;在IE 6？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！