CSS HTML line appearing on div :active

问题

OK, I had a series of divs set up to work as navigation bar images that would highlight and become active on upon click:

<td><div class="navbright"><a href="http://www.x.com"><img src="/images/Home.jpg" alt="" width="200"></a></div></td>
<td><div class="navbright"><a href="http://www.x.com/Articles.html"><img src="/images/Articles.jpg" alt="" width="200"></a></div</td>
<td><div class="navbright"><a href="http://www.x.com/Forum.html"><img src="/images/Forum.jpg" alt="" width="200"></a></div></td>
<td><div class="navbright"><a href="http://www.x.com/Store.html"><img src="/images/Store.jpg" alt="" width="200"></a></div></td>
<td><div class="navbright"><a href="http://www.x.com/Contact.html"><img src="/images/Contact.jpg" alt="" width="200"></div></a></td>

I set my css up as:

.navbright {
  background-color: #FFC39A;
  display: block;
  outline:none;
}
.navbright img:hover {
  opacity: .6;
}

.navbright img:active {
  opacity: .3;
}

Everything was working fine. I then "cleaned up" my main coding from:

 <table align="center" bgcolor="#2c2828" border="0"
 cellpadding="0" cellspacing="0" width="1000">
<tbody>
<tr>
  <td class="IndexMainBody" valign="top">
  <table align="center">
    <tbody>
      <tr>
        <td
 style="padding-top: 10px; padding-left: 10px; padding-right:10px;"><!-- end header-->
        <p align="center"><big><big><big><span style="color: rgb(255, 0, 0);"><strong>text</P>         
        </td>
      </tr>
    </tbody>
  </table>
  </td>
</tr>

To:

<table align="center" bgcolor="#2c2828" border="0" cellpadding="0" 
cellspacing="0" width="1000">
<tr>
<td><hr>            
    <P align="center">text</P>                  
</td>
</tr>
</table>

Notice I added a horizontal rule. Ok, now these annoying red lines a extending a few pixels above and below the left border of every div image link would show up everytime they were clicked using :active. I even tried reverting back to the old code and they do not disappear. Someone please help me out; it's driving me crazy.

回答1:

I'm thinking it you might be seeing red lines as a boarder on a visited link try adding this to your css


a:visited {

text-decoration: none;

回答2:

This should set all of your link option to no decoration

<style>
a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

a:active {
    text-decoration: none;
}

</style>

<td><div class="navbright" style="border:none"><a href="http://www.x.com"><img src="/images/Home.jpg" alt="" width="200" style="border:none"></a></div></td>

来源：https://stackoverflow.com/questions/28469114/css-html-line-appearing-on-div-active

标签

html

css

line