Question

我在IE8上的网站上遇到了一些问题。有问题的CSS应该在标有class="error"的输入元素周围绘制一个2px的红色边框。它对页面上的某些输入元素按预期工作，但对于其他元素，它会在元素周围绘制一个2px的白色边框。如果我从输入元素中删除display: table-cell属性，那么它们都能正常工作。 CSS在我尝试的所有其他浏览器（FF3，Chrome，Opera）上按预期工作。

我已经复制并粘贴了页面的DOM树和CSS的相关部分 - 如IE8的Developer Tools窗口所示 - 下面是工作输入元素和非工作元素。我无法弄清楚它们之间的区别。有人可以帮忙吗？

感谢。

DOM树

<form>
    <div class="table" id="contact_info">
        <div class="row" id="email">
            <label for="email_text">
                Text - E-Mail Address
            Text - Empty Text Node
        <!-- this input element doesn't show the correct border color -->
            <input name="email" class="error" id="email_text" type="text" AUTOCOMPLETE="OFF" value="invalid address"/>
            <label class="error" for="email_text" generated="true">
                 Text - Please enter a valid e-mail address
            Text - Empty Text Node
        <div>...
    <div class="table" id="security_info">
         <div class="row" id="password_conf">
             <label for="password_conf_text">
                 Text - Re-type Your Password
             Text - Empty Text Node
         <!-- this input element does show the correct border color -->
             <input name="password_conf" class="error" id="password_conf_text" type="password" value="nomatch"/>
             <label class="error" for="password_conf_text" generated="true">
                 Text - Please enter the same value again.
             Text - Empty Text Node

**输入的CSS＃email_text（不工作）**

inherited - body
    BODY
        text-align: center
        font-family: Arial, Helvetica, sans-serif
        font-size: 12pt
inherited - div
    #container
        text-align: left
FORM .row > *
    margin: 3px 0px
    display: table-cell                 // if I turn this off, then the borders work
    vertical-align: top
INPUT.error
    border-bottom: red 2px solid
    border-left: red 2px solid
    border-top: red 2px solid
    border-right: red 2px solid
INPUT[type='text']
    font-family: Arial, Helvetica, sans-serif
    font-size: 12pt
INPUT[type='text']
    width: 175px

**输入的CSS＃password_conf_text（工作）**

inherited - body
    BODY
        text-align: center
        font-family: Arial, Helvetica, sans-serif
        font-size: 12pt
inherited - div
    #container
        text-align: left
FORM .row > *
    margin: 3px 0px
    display: table-cell
    vertical-align: top
INPUT.error
    border-bottom: red 2px solid
    border-left: red 2px solid
    border-top: red 2px solid
    border-right: red 2px solid
INPUT[type='text']
    font-family: Arial, Helvetica, sans-serif
    font-size: 12pt
INPUT[type='text']
    width: 175px

Answer 1

在每个属性的行末尾和开头和结尾的括号中都缺少分号。例如form { border:none; color: #333 }

Answer 2

您在css中尝试了.error而不是FORM.error吗？

为什么我的CSS有时在IE8中工作而不是其他时间？

2 个答案: