html - Vertical lines on "li" items when Zoom changes -

html - Vertical lines on "li" items when Zoom changes -

i testing on chrome. button looks without zoom.

<li class="active" id="site_content"> <a href="#" id="site_content_link">edit content</a> </li>

here how looks if zoom in/out

here 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 { 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 { font-family: arial; font-weight: bold; line-height: 16px; }

i created jsfiddle here: http://jsfiddle.net/bdga4/

best solution "slice" sub_nav_left.png image 1px wide background image horizontal (repeat-x) setting enabled. fill space in cases.

html css google-chrome