背景图片居中和超链接绝对定位并使用图片背景的问题
前提说明:
home.png是一张大小为1089*948大小的背景图片
subscriber-login.png是一张大小为203*32大小的登陆按钮图片，而且该图片截取于背景图片中，位置为(822,171)
需求：
现在想要实现一个页面，居中显示背景图片，然后点击subscriber-login.png所表示的按钮或者超链接进入登陆页面
最终代码：
<body>
<div align="center">
<div align="left" style=" width:1089px; height: 948px; background-image: url(images/home.png);">
<a href="login.jsp" style=" position: relative; left: 822px; top: 171px; width: 203px; height: 32px;">
<img src="images/subscriber_login.png" style="border:none;"/>
</a>
</div>
</div>
</body>
实现过程：
1 背景居中设置
以下代码可以将背景图片设置为居中，要点是用两层div：首先将内层div大小固定为背景图片的大小，并将背景图片设置为该div的背景；然后在用外层div包含内层div，且设置对齐为居中即可
<body>
<div align="center">
<div align="left" style=" width:1089px; height: 948px; background-image: url(images/home.png);">
</div>
</div>
</body>
2 设置登陆按钮(IE有效)
注：这里发生了IE和Firefox不兼容的问题
以下代码在内层div中添加超链接，设置其相对定位position: relative; left: 822px; top: 171px; 同时设置该超链接的大小width: 203px; height: 32px;
但是该代码只能在IE中起效，在Firefox中则根本找不到超链接的位置，估计是大小没有起效为0了
<body>
<div align="center">
<div align="left" style=" width:1089px; height: 948px; background-image: url(images/home.png);">
<a href="login.jsp" style=" position: relative; left: 822px; top: 171px; width: 203px; height: 32px;"></a>
</div>
</div>
</body>
3 设置登陆按钮(IE/Firefox有效)
怀疑是超链接<a>的大小设置失效，想为超链接添加背景图片，以确定超链接的大小，Firefox依然无效
<a href="login.jsp" style=" position: relative; left: 822px; top: 171px; width: 203px; height: 32px; background-image: url(images/subscriber-login.png.png);"></a>
Firefox中多次测试无效后，在超链接中添加文字查看效果，发现文字可以显示，但是背景图片并不显示，更换背景图片的设置方式background: url(images/subscriber-login.png.png) no-repeat; 依然不起效，怀疑是Firefox中超链接不支持设置背景图片
<a href="login.jsp" style=" position: relative; left: 822px; top: 171px; width: 203px; height: 32px; background-image: url(images/subscriber-login.png);">Test</a>
最后想到在超链接中添加图片
<body>
<div align="center">
<div align="left" style=" width:1089px; height: 948px; background-image: url(images/home.png);">
<a href="login.jsp" style=" position: relative; left: 822px; top: 171px; width: 203px; height: 32px;">
<img src="images/subscriber_login.png"/>
</a>
</div>
</div>
</body>
此时超链接终于在想要的位置显示出来，IE和Firefox都其效果，但是IE中却发下图片四周多了一个蓝色边框，在点击之后边框会变成紫色，而Firefox则没有这个问题
最后，取消IE中的边框
<img src="images/subscriber_login.png" style="border:none;"/>
总结：
(a) Firefox中不支持直接设置超链接的大小，也不支持超链接设置背景图片，而IE可以
(b) 超链接<a>中包含图片<img>时，IE会出现边框，而Firefox不会