风格被重置为“无”

2018-07-01 11:32:00

在下面的代码中，如果我删除！重要属性，我的“列”边框会重置为style = none，但我无法弄清楚原因。调试器显示“none”，当我通过调试器将样式设置为“固定”时，显示出我的边框。我加了！作为最后的手段是重要的，它的工作，但共识是避免使用！重要。

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="Content-Type" 
    content="text/html; charset=utf-8"/>
<STYLE>  
#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;
    }

</STYLE>
</HEAD>
<body>
<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>
</BODY>
</HTML>

</CODE>

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

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

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

链接地址: http://www.djcxy.com/p/87783.html

上一篇: style being reset to "none"

下一篇: Override CSS style behaviour without using !important or inline style sheet