Question

在以下代码中我的＃34;列＆＃34;如果删除style=none属性但我无法找出原因，则边框会重置为!important。调试器显示＆＃34; none＆＃34;当我将风格设置为＆＃34; solid＆＃34;通过调试器，我的边框出现了。我添加了!important作为最后的手段并且它有效，但共识是避免使用！important。

＆＃13;

#selection_td {
  width: 100%;
  position: absolute;
  border-style: solid;
  border-color: green;
  border-width: 2px;
  margin-left: auto;
  margin-right: auto;
  height: 75px;
}

#selection_div {
  position: relative;
  width: 100%;
  border-style: solid;
  border-color: blue;
  border-width: 2px;
  margin-left: auto;
  margin-right: auto;
  height: 75px;
}

.child_row {
  position: relative;
  visibility: visible;
  width: 99%;
  min-width: 99%;
  height: 75px;
  border-style: solid;
  border-color: red;
  border-width: 2px;
  margin-left: auto;
  margin-right: auto;
}

.column {
  border-style: solid !important;
  border: 2px;
  border-radius: 10px;
  border-color: black;
  display: inline-block;
  overflow: hidden;
  width: 50px;
  height: 75px;
}

.color_img {
  width: 50px;
  height: 75px;
}

＆＃13;

<TABLE>
  <TR>
    <TD colspan="2" align="center" id="selection_td">
      <DIV id="selection_div">
        <DIV class="child_row" id="child_2_row">
          <DIV class="column" style="background-color: #F8D583">
            <img id="color_img" src="images/blank.png" width="50">
          </DIV>
        </DIV>
      </DIV>
    </TD>
  </TR>
</TABLE>

＆＃13;

Answer 1

而不是border: 2px;使用border-width: 2px;。仅使用border，您将所有其他属性重置为默认值。

Answer 2

冲突的边界规则。你可以结合起来避免这种情况：

.column{
     border: solid 2px black;
     border-radius: 10px;
     display: inline-block;
     overflow:hidden;
     width: 50px;
     height: 75px;
}

CSS边框样式被重置为“无”

2 个答案: