缩放更改时“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/