Html 在IE和FF-box中定位浏览器之间布局不一致的修复解决方案

我正在构建这个精灵地图，用CSS定位。我已经在IE中构建了原型，而在FF中，盒子的定位是非常不准确的

如您所见，在IE9中，背景位置排列正确，但在FireFox中，ListItem背景可见，但严重偏移

这是我对这个布局的CSS。是否有人发现可能导致这种差异的问题

#iconmenu #panel1c {left: 1px;   background-position-x: -48px; background-position-y: -9px;   no-repeat;}
#iconmenu #panel2c {left: 119px; background-position-x: -48px; background-position-y: -87px;  no-repeat;}
#iconmenu #panel3c {left: 237px; background-position-x: -48px; background-position-y: -165px; no-repeat;}
#iconmenu #panel4c {left: 354px; background-position-x: -48px; background-position-y: -241px; no-repeat;}
#iconmenu #panel5c {left: 469px; background-position-x: -48px; background-position-y: -319px; no-repeat;}
#iconmenu #panel6c {left: 586px; background-position-x: -48px; background-position-y: -397px; no-repeat;}
#iconmenu #panel7c {left: 704px; background-position-x: -48px; background-position-y: -475px; no-repeat;}
#iconmenu #panel8c {left: 821px; background-position-x: -48px; background-position-y: -553px; no-repeat;}
#iconmenu #panel1c a:hover {background: url(<%=Url.Content("~/Images/sprite.png")%>) -48px -630px  no-repeat;}
#iconmenu #panel2c a:hover {background: url(<%=Url.Content("~/Images/sprite.png")%>) -48px -708px  no-repeat;}
#iconmenu #panel3c a:hover {background: url(<%=Url.Content("~/Images/sprite.png")%>) -48px -786px  no-repeat;}
#iconmenu #panel4c a:hover {background: url(<%=Url.Content("~/Images/sprite.png")%>) -48px -862px  no-repeat;}
#iconmenu #panel5c a:hover {background: url(<%=Url.Content("~/Images/sprite.png")%>) -48px -940px  no-repeat;}
#iconmenu #panel6c a:hover {background: url(<%=Url.Content("~/Images/sprite.png")%>) -48px -1018px no-repeat;}
#iconmenu #panel7c a:hover {background: url(<%=Url.Content("~/Images/sprite.png")%>) -48px -1096px no-repeat;}
#iconmenu #panel8c a:hover {background: url(<%=Url.Content("~/Images/sprite.png")%>) -48px -1174px no-repeat;}
#iconmenu #panel8c { border-right:0px; }
#iconmenu    { width: 936px; height: 125px; position: relative; margin-left: 0px; border: solid 1px #ce8a59; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; background-color: #f8efde; }
#iconmenu li { width: 74px;  height: 74px;  position: absolute; padding-right: 20px; margin: 20px;margin-left: 22px;margin-right: 10px; top: -7px; background: url(<%=Url.Content("~/Images/sprite.png")%>) 0 0 no-repeat;display: block;list-style: none;border-right: 1px solid #d59d6e;}
#iconmenu a  { width: 73px;  height: 72px;  display: block; }
#iconmenu a:hover { color: #edc07f; }
#iconmenu span { font-family: Arial,Tahoma,Verdana;font-size: 10px;font-weight: bold;color: #cc8a5a;margin-top: 0px;padding-top: 9px;line-height: 1em;text-align: center;vertical-align: baseline;display: block;}
.icon {height:70px; width:100px;}
.iconMenuItem { float:left; width:117px; height:70px; border-left:1px solid #ce8a59;    }

以下是HTML：

<ul id="iconmenu">
                            <li id="panel1c"><a href="#"></a><span>Production Dashboard</span></li>
                            <li id="panel2c"><a href="#"></a><span>Lorem Ipsum</span></li>
                            <li id="panel3c"><a href="#"></a><span>Lorem Ipsum</span></li>
                            <li id="panel4c"><a href="#"></a><span>Lorem Ipsum</span></li>
                            <li id="panel5c"><a href="#"></a><span>Lorem Ipsum</span></li>
                            <li id="panel6c"><a href="#"></a><span>Lorem IpsumExcel</span></li>
                            <li id="panel7c"><a href="#"></a><span>Lorem Ipsumnt Uploader</span></li>
                            <li id="panel8c"><a href="#"></a><span>Lorem Ipsumols</span></li>
                        </ul>

非常感谢您的关注

编辑-对于完全变色，这是上面的代码生成的。第一个屏幕截图基于更旧的代码：

---

我能看出一个矛盾

Firefox和Opera不支持background-position-x和``background-position-y`

因此，与其使用

background-position-x: -48px; background-position-y: -9px;

使用

---

不知道。但是+1回答了这个奇妙的问题。哈哈，非常感谢你的友好之词。几乎和解决方案一样好！非常有趣。。。我现在就给你打一针。万分感谢！工作得很有魅力！！非常感谢。我使用了显式的x和y，因为我忘记了哪一个先出现。。。。无论如何，再次谢谢加布。

 background-position: -48px -9px;