在下面的代码中,如果我删除了!important属性,我的"column"边框会重置为style = none,但我无法弄清楚原因 . 调试器显示"none",当我通过调试器将样式设置为"solid"时,我的边框显示出来 . 我添加了!重要作为最后的手段并且它有效,但共识是避免使用!important .
<!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>
2 回答
冲突的边界规则 . 你可以结合起来避免这种情况:
而不是
border: 2px;
使用border-width: 2px;
. 仅使用border
,您将所有其他属性重置为默认值 .