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)设置。这将在所有情况下填充空间。