Font-family causes one pixel drawing problem in Chrome
I'm trying to show a simple tab-menu on a web page. I'm using a pretty basic and well-used pattern, which is working fine except that when I test the page in Chrome (well, Chromium but afaik it's the same) I see a 1-pixel wide artifact that I can't seem to mask.
Here's the test code:
<!DOCTYPE html>
<html>
<head>
<title>One pixel menu bug</title>
<style>
body {
font-family: sans-serif;
margin: 0;
}
h1 {margin-bottom: 1em}
#menu {
padding-top: .3em;
padding-bottom: 0;
z-index: 1;
background: black;
font-size: 1em;
margin-top: 0.5em;
}
#menu ul {
list-style: none;
border: 0 none;
padding: 0;
margin-left: 2em;
border-bottom: 1px solid black;
}
#menu li {
display: inline;
margin-right: .15em;
background-color: white;
}
#menu li a {
text-decoration: none;
color: #99a;
padding: 0px 12px;
}
#menu a.selected {
font-weight: bold;
color: black;
border-bottom: 2px solid white;
}
</style>
</head>
<body>
<h1>Site title here</h1>
<div id="header">
<div id="menu">
<ul>
<li><a href="#">Are we not men?</a></li>
<li><a href="#" class="selected">We are Devo</a></li>
</ul>
</div>
</div>
<p>Lorem ipsum</p>
</body>
</html>
and the result I see with Chrome (left) and Firefox (right):
Removing the font-family line of the style de开发者_如何转开发claration makes the problem disappear, but I don't want to do that for the main site. Explanations as to what's going on, or suggestions for work-arounds welcome!
Not all browsers will render the font exactly the same height. Besides, you're mixing pixel measurements with point measurements (em), which can cause rounding problems too.
I think you can easily fix this by specifying either a line height, or an exact height for the menu item. And/or set their position relative to the bottom of the menu. As far as I can tell you do neighter, so their exact position is now entirely based on the height of the rendered font.
I think you have a line-height problem - sans serif fonts have different hights/glyphs than serif/mono ?
Try set line-height as well as font-family - 1.5em - 12 px font = 18px line-height ?
Just guessing ...
加载中,请稍侯......
精彩评论