style being reset to "none"

2018-07-01 11:32:00

In the following code my "column" borders get reset to style=none if I remove the !important attribute but I can't figure out why. The debugger shows "none" and when I set the style to "solid" through the debugger, my borders show up. I added !important as a last resort and it worked, but the consensus is to avoid using !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>

Instead of border: 2px; use border-width: 2px; . Using just border you will reset all other attributes to defaults.

Conflicting border rules. You can combine to avoid this :

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

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

上一篇: 孩子和：最后

下一篇: 风格被重置为“无”