html - 缩放更改时“li”项目上的垂直线

Question

我正在 Chrome 上进行测试。我的按钮在没有缩放的情况下看起来不错。

<li class="active" id="site_content">
      <a href="#" id="site_content_link">Edit Content</a>
</li>

这是我放大/缩小时的样子

这是CSS：

.sub_nav ul li.active, .sub_nav ul li:hover {
background: url("/assets/sub_nav_right.png") no-repeat scroll right 0;
padding: 0 11px 0 0;

.sub_nav ul li {
display: block;
float: left;
line-height: 16px;
margin: 0 0 0 28px;
}

.sub_nav ul li.active a, .sub_nav ul li:hover a {
background: url("/assets/sub_nav_left.png") no-repeat;
color: #FFFFFF;
display: block;
padding: 5px 0 5px 11px;
text-shadow: none;
}

.sub_nav ul li a {
font-family: arial;
font-weight: bold;
line-height: 16px;
}

我在这里创建了一个 jsfiddle：http: //jsfiddle.net/BdGA4/

Answer 1

最好的解决方案是将 sub_nav_left.png 图像“切片”为 1px 宽的背景图像，并启用水平 (repeat-x) 设置。这将在所有情况下填充空间。

Answer 2

我增加了右侧精灵的大小。而不是 11px 的宽度，它现在是 16px 的宽度。两个精灵现在重叠，因此您不会看到浏览器舍入像素导致的缩放错误。

Fixed fiddle

http://jsfiddle.net/BdGA4/2/