【问题标题】:IE issue with styling <select/> elementIE 样式问题 <select/> 元素
【发布时间】:2011-12-18 15:36:16
【问题描述】:

考虑以下 HTML 标记:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <title>search/master</title>
        <style type="text/css">
            select{
                background-color: pink;
            }
            option{
                background-color: white;
            }
        </style>
    </head>

    <body>
        <p>
            <select>
                <option>one........</option>
                <option>two........</option>
            </select> 
        </p>
    </body>
</html>

FF 上的输出如下:(Chrome、Safari 和 Opera 也有类似的输出)

但在 IE 上输出如下:

使 IE 上的输出看起来与其他浏览器相似的可靠且简单的解决方法是什么?

【问题讨论】:

    标签: jquery html css internet-explorer cross-browser


    【解决方案1】:

    如果你确实想这样做,你可以使用 1px x 1px 背景图片,并将选项设置为 :transparent

    select{
        background: url(http://ajthomas.co.uk/stackoverflow-help/back.png);
    }
    option{
        background: transparent;
    }
    

    查看我为你做的jsfiddle example

    【讨论】:

    • 非常恰当地使用了defiantly这个词。
    【解决方案2】:

    如果您将背景颜色(用于选择和选项)都设为粉红色,则它在每个浏览器中看起来都完全相同。一个更好的解决方案可能......根本不要在选项元素上指定背景颜色......

    【讨论】:

    • "如果你将背景颜色(用于选择和选项)都设为粉红色,它在每个浏览器中看起来都完全相同" 不,'选择'在 IE 中将是白色的!
    • 嗯..我用的是ie9,看起来很正常。也许您使用的是旧版本?
    • 当然你是对的,我很抱歉。但我的要求是让“选择”和“选项”保持不同的颜色。
    • @MISS_DUKE:所以在这种情况下,FireFox(以及除 ie 之外的其他人)看起来很奇怪。
    【解决方案3】:
    • 首先删除以下 css 值,它为 OPTIONS 赋予白色背景色,从而在 IE 中隐藏选择的粉红色背景色。

      option {
          background-color: white;
      }
      
    • 其次,始终将 Form 元素包含在 Form 和 Fieldset 标签内,如下所示:-

      <form>
      <fieldset>
          <select>
              <option>One</option>
          </select>
      </fieldset>
      </form>
      
    • Third Form 和 Fieldset 具有默认的边框和填充值,因此在 css 中您可以添加以下代码来删除这些默认值:

      form, fieldset {
          border: 0px;
          margin: 0px;
          padding: 0px;
      }
      

    简而言之,IE 不能正确显示选择框的主要原因是选择元素没有包含在 FORM 和 OPTION 的白色背景颜色值中。

    希望这会有所帮助。

    【讨论】:

      【解决方案4】:

      当我们为选择元素内部的选项和选择元素本身指定一些背景颜色时,就会出现问题。

      Workaround : Apply style (background-color) to the option elements only when the select element is in focussed state. (只有在选择元素处于聚焦状态时,我们才能真正看到其中的选项元素)

       select{
           background-color: #f1f1f1;
           ...              
        }
      
        select:focus > *{
          background-color:#fff;
        }
      

      【讨论】:

        猜你喜欢
        • 2014-10-15
        • 1970-01-01
        • 2011-10-07
        • 2011-11-08
        • 1970-01-01
        • 2014-07-11
        • 1970-01-01
        • 2013-11-25
        • 1970-01-01
        相关资源
        最近更新 更多