CSS: IE clips top and bottom off element
I have an annoying display issue in IE (7/8). I have some tabs that serve as navigation, the tabs have the top and bottom sections cut off for some reason in spite of my efforts to make the box bigger.
In Chrome and Firefox this all displays correctly as you can see in the images below. Note I have artificially moved the tabs into an empty area of the page so its easier to see whats going on.
How it looks in IE:
How it looks in Chrome
Now obviously IE doesn't render the rounded corners, that's fine (unless someone knows something I dont) but as you can see the height of the links in IE are smaller than Chrome and actually clip the top border off.
HTML
The HTML is simply <a>
elements within a <div>
like so
<div id="topnavcontainer">
<a href='/web/link1.html' class='current'>Link 1</a>
<a href='/web/link2.html'>Link 2</a>
<a href='/web/link3.html'>Link 3</a>
</div>
CSS
#topnavcontainer {
display: block;
color: #fff;
font-size: 14px;
position: absolute;
right: 0;
bottom: 0;
height: 40px;
}
#topnavcontainer a {
color: #555;
text-decoration: none;
padding: 5px 12px;
font-weight: 800;
overflow: visible;
background-color: transparent;
border: 0;
line-height: normal;
bottom: 0;
height: 40px;
}
As you can see I have tried to overcome the problem by sp开发者_如何学JAVAecifying normal line-height
as well as making the overflow
visible. I have also tried making the links and containing div much higher than they should be just in case there was a weird height issue. Nothing seems to solve it.
Set the link to "display: inline-block;". As for IE6/7, do "display: inline; zoom: 1;" instead.
I've seen this problem happen before on block elements. The "inline-block" solution seemed to fix it.
Try adding float:left; It's possible that your padding isnt even working.
if this solution doesnt work, make a different CSS for IE and set a different height for IE. also, try to put a button on your website asking your visitors to download Firefox or Chrome... it will make the internet better! :D
精彩评论