css - 未知覆盖的背景图像/精灵定位

Question

在：http: //jsfiddle.net/elasticGurl/CpBX5/

我的 CSS 有问题，背景图像隐藏了图像左边缘的一部分（阴影所在的位置）。请参阅带有红色箭头的底部图像（仅供参考）以查看问题所在。它在左侧，大致从“设备”的顶部到“访问”的底部。这很简单，但我看不到。

http://jsfiddle.net/elasticGurl/CpBX5/

问题CSS如下：

form#frm_select_a_plan ul#select_a_plan_inner { list-style: none outside none; padding: 0px; margin: 0px; }
form#frm_select_a_plan ul#select_a_plan_inner li { background: url('http://www.myproduction-1.info/_BG/_images/sbsignup_pricing_generic.png') no-repeat scroll 0px 0px transparent; font-size: 14px; background-position: -5px -133px; width: 534px; height: 62px; margin-left:274px; }

form#frm_select_a_plan ul#select_a_plan_inner li.access { background-position: -5px -133px; width: 502px; height: 11px;}
form#frm_select_a_plan ul#select_a_plan_inner li span { display: block; float: left; text-align: center; }

任何提示将不胜感激。

Answer 1

从负数background-position变为零。然后调整边距。

见小提琴：http: //jsfiddle.net/rCJaN/

form#frm_select_a_plan ul#select_a_plan_inner li { background: url('http://www.myproduction-1.info/_BG/_images/sbsignup_pricing_generic.png') no-repeat scroll 0px 0px transparent; font-size: 14px; background-position: 0px -133px; width: 534px; height: 62px; margin-left:269px; }
form#frm_select_a_plan ul#select_a_plan_inner li.access { background-position: 0px -133px; height: 11px;}
form#frm_select_a_plan #select_a_plan_bottom { margin: 0px; background: url('http://www.myproduction-1.info/_BG/_images/sbsignup_pricing_generic.png') no-repeat scroll center bottom transparent;  list-style: none outside none; background-position: 0px -307px; width: 534px;height: 123px; margin-left:269px; }