Question

我有一个下拉列表

<select name="cmb" class="txtRed" id="cmb1">
  options
</select>

在style.css中的

我将类txtRed作为

.txtRed {
border-bottom : red 2px solid;
border-top : red 2px solid;
border-left : red 2px solid;
border-right : red 2px solid;
}

适用于 Mozila Firefox 和 Google Chrome 。它仅与IE 8有问题。这是什么解决方案？是否可以使用任何其他属性或黑客？

输出应该如下图所示

enter image description here

我已经尝试过以下虚拟代码，这也不适用于IE8，我已经检查了兼容模式，它仅适用于IE 8

<html>
    <head>
        <style type="text/css">
            .txtRed {
                border-bottom : red 2px solid;
                border-top : red 2px solid;
                border-left : red 2px solid;
                border-right : red 2px solid;
            }
        </style>
    </head>
    <body>

        <select name="cmb" class="txtRed" id="cmb1" style="border-bottom:red 2px solid;">
            <option> Option 1 </option>
            <option> Option 2 </option>
        </select>

    </body>
</html>

Answer 1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

将此添加到您的代码

Answer 2

我创建了一个小提琴，表明它也适用于IE 8。看到这个 -

<select name="cmb" class="txtRed" id="cmb1">

</select>

的CSS -

.txtRed {
border-bottom : red 2px solid;
border-top : red 2px solid;
border-left : red 2px solid;
border-right : red 2px solid;
}

DEMO - 在IE8中看到它并且运行良好。

<强>期 - 我怀疑你的浏览器是在兼容模式下渲染，因此渲染为IE7会导致问题

Answer 3

使用<div>括起<select>标记。将.txtRed应用于div代替。

<div class="txtRed">
<select name="cmb" id="cmb1">
  // options go here
</select>
</div>

Answer 4

对我来说问题是浏览器的文档模式（IE9设置为IE7标准）

边框颜色不适用于IE 8中的选择HTML元素

4 个答案: