首页 文章

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

提问于
浏览
0

在下面的代码中,如果我删除了!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 回答

  • 3

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

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

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

相关问题