CSS: text-decoration:none; works in Firefox, does not work in IE 8

StackOverflow https://stackoverflow.com/questions/11085149

문제

I'm developing a footer in an HTML file ( simplified, included below ). I have two links, with images on the left called:

  • footer1
  • footer2

In Firefox 13 the blue line of the hyperlink does NOT appear around these two image/links, as desired. In IE 8, the blue line does and stubornly refuses to go away despite including the css ( see file below ):

 #footer1 a{text-decoration:none;}

I would like to make the blue links for the links in the left two image/links go away and keep the text decoration in my other links.

Thanks much in advance for any help.

Steve

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <title>Text Decoration Will Not Disappear In Two Left Images In IE 8</title>
    <style type ="text/css">
    #footer
    {
        background-image:url('../images/bg-texture.gif');
        padding: 20px;
        height: 50px;
        font-size:8pt;
    }
    #footer ul, li 
    {
        display: inline;
        float:left;
        list-style-type: none;
        vertical-align:top;
        text-align:left;
    }


    #footer1 {margin-right:10%;margin-left:5%;}
    #footer1 a{text-decoration:none;}
    #footer2{margin-right:10%;}
    #footer3{margin-right:10%;}
    #footer4{margin-right:10%;}
    #footer5{margin-right:10%;}

    </style>
</head>

    <body>

            <!-- The Footer -->
            <ul id="footer">
                <li id="footer1"><a href="http://slashdot.org"> <img alt="" src="files/doc.gif"/></a></li>
                <li id="footer2"><a href="http://google.com"><img alt="" src="files/noaa.gif"/></a></li>
                <li id="footer4"><a href="http://slashdot.org/">Right Link 1</a></li>
                <li id="footer5"><a href="http://google.com">Right Link 2</a></li>
            </ul>

</body>
</html>
도움이 되었습니까?

해결책

To remove the border from images you should do

a img { border: 0 }

and that won't affect your text links

다른 팁

The blue around images that are a link is a border. So set this and it should be fine:

a img
{
border:0;
}

The following selector:

div * p

matches a P element that is a grandchild or later descendant of a DIV element. Note the white space on either side of the "*" is not part of the universal selector; the white space is a combinator indicating that the DIV must be the ancestor of some element, and that that element must be an ancestor of the P.

Hence,

try

#footer1 * a{text-decoration:none;}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top