将 CSS 样式<div>应用于

Question

我的问题是下面的html

<div class="editor-container">
   <div class="editor-row curFocus">
       <div class="editor-label">
           <label for="FirstName">First Name</label>
       </div>
       <div class="editor-field">
          <input class="text-box single-line valid" id="FirstName" 
                name="FirstName" type="text" value="Nancy" maxlength="20">
       </div>
   </div>
</div>

当用户选择输入字段时，我通过一些javascript将类"curFocus"添加到外部div中，以突出显示标签和输入字段。

我的css是-

.editor-container {
    border: thin solid #444444;
    display: table; width: 100%;
 }
.editor-row {
  width: 100%; display: table-row;
}
.editor-label {
  padding-left: .4em; width: 40%;
}
.editor-label, .editor-field {
   padding-right: .4em; padding-bottom: .2em; padding-top: .2em;
   display: table-cell;
 }
 .curFocus {
   border: 2px solid #05365b;
   background-color: #d3e5f2;
   margin: 3px; padding: 3px;
  }

我的问题是，当在Chrome 12和IE9中使用调试器时，它们都会显示应用于外部div的边框设置。但是，当查看表单时，浏览器显示的都不是指定的边框。所有其他css设置都能正常工作。我还尝试将".curFocus"的定义更改为".curFocusdiv"。但这也将样式应用于每个嵌套的div，但确实在所有div上显示了边框。

虽然我不是CSS专家，但不清楚为什么这不起作用。

---

编辑这里是jsfiddle链接-http://jsfiddle.net/photo_tom/KmsF5/1/.在测试这一点时，如果在IE7兼容模式下，它确实可以在IE9中正常工作。否则，它将无法正确显示。很抱歉没有包含链接，仍然习惯于jsfiddle的存在。

Answer 1

好吧，我可以告诉你是什么引起的，但我不能告诉你为什么。具有display: table-row;的元素不能应用边框。可以将边界应用于.curFocus元素的table-cell子元素，但不能应用于table-row本身。

同样，不知道为什么这个愚蠢的规则存在，但你可以用一些CSS:来解决你的问题

.curFocus {
   background-color: #d3e5f2;
   margin: 3px; padding: 3px;
}
.curFocus>div {
   border: 2px solid #05365b;
   border-width: 2px 0px;  /* top and bottom border for all the table-row's immediate children (table-cells) */
}
.curFocus>div:first-child {
    border-width: 2px 0px 2px 2px; /* left border for the leftmost table-cell */
}
.curFocus>div:last-child {
    border-width: 2px 2px 2px 0px; /* right border for the rightmost table-cell */
}

请参阅http://jsfiddle.net/d772N/

Answer 2

我认为你的问题是你在.editor行上的显示类型。display: table-row;删除它，问题就会消失。另外，我不认为所有浏览器都很好地支持display: table-row;。

Answer 3

您可能需要更高的CSS专用性，因为当前定义中应用的CSS样式不明确。

对于类定义，请尝试div.curFocus而不是.curFocus div，以便将样式应用于具有该类名的div，而不是其div子级。