html – 应用CSS样式

概述我的问题是下面的 HTML <div class="editor-container"> <div class="editor-row curFocus"> <div class="editor-label"> <label for="FirstName">First Name</label> </div> <div class 我的问题是下面的 HTML

<div >   <div >       <div >           <label for="Firstname">First name</label>       </div>       <div >          <input  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”的定义更改为“.curFocus div”.但是这也将样式应用于每个嵌套div,但确实在所有div上显示了边框.

虽然我不是CSS专家,但为什么这不起作用并不明显.

编辑
这里是Jsfiddle链接 – http://jsfiddle.net/photo_tom/KmsF5/1/.在测试它时,如果在ie7兼容模式下,它在IE9中可以正常工作.否则,它无法正确显示.
抱歉不包括链接,仍然使用Jsfiddle甚至存在的事实.

解决方法 好吧,我可以告诉你是什么导致了它,但我不能告诉你为什么.带显示的元素：table-row;不能应用边框.您可以将边框应用于.curFocus元素的table-cell子元素,但不应用于表格行本身.

再一次,不知道为什么存在这个愚蠢的规则,但你可以用一些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/

总结

以上是内存溢出为你收集整理的html – 应用CSS样式全部内容，希望文章能够帮你解决html – 应用CSS样式所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。