Question

我的网站上有部分页脚在不同的浏览器上出现问题。

在我的网站http://reportalert.info/index-test.php上，twitter，rss和share图标会在不同的浏览器上被切断并略微移动。我已经尝试更改每个图标的背景位置和填充，但我似乎无法让它在不同的浏览器中工作。有关如何解决此问题的任何建议吗？

以下是我为页脚提供的代码：

#footer 
{
    clear: both;
    font-family: "Droid Serif";
    margin:10px 0;
    padding-bottom:60px;
    width:100%;
    height:10px;
    text-align:left;
    font-size:80%;
    color:#444;
}
a.ftwitter
{
    background:url(http://reportalert.info/images/nra/ra-share.png/images/nra/ra-twitter.png) left no-repeat;
    background-position:0 -22.5px;
    padding:3px 55px;
}
a.ftwitter:hover
{
    background-position:0 0;
    padding:4px 55px;
}
a.frssfeed
{
    background:url(http://reportalert.info/images/nra/ra-share.png/images/nra/ra-feed.png) left no-repeat;
    background-position:0 -26.5px;
    padding:5px 55px;
}
a.frssfeed:hover
{
    background-position:0 0;
    padding:6px 55px;
}    
a.fshare
{
    background:url(http://reportalert.info/images/nra/ra-share.png) left no-repeat;
    background-position:0 -22.5px;
    padding:3px 60px;
}
a.fshare:hover
{
    background-position:0 0;
    padding:4px 60px;
}

提前感谢您的帮助

Answer 1

Padding在每个浏览器中的工作方式都不同，这就是为什么你的图标会在Chrome中被切断的原因。

我会使用特定的宽度和高度。

Answer 2

尝试使用宽度和高度，而不是填充。并添加display: inline-block。例如：

a.ftwitter 
{
    display: inline-block; 
    background:url(http://reportalert.info/images/nra/ra-share.png/images/nra/ra-twitter.png) left no-repeat;
    background-position:0 -22.5px;
    width: 110px;
    height: 22px;
}

Answer 3

我认为这可能会有所帮助。将其应用于您的图标：

position:relative;
z-index:99;

Answer 4

被切断的图标都是空的a元素。因为它是一个inline流元素，这意味着它会折叠到默认文本高度 - 您使用的字体为20像素，而Twitter图标为22，因此会导致2个像素被截断。

将锚点设置为display:inline-block，或者布局中的其他块布局样式，以及允许的正确高度，然后解决。

页脚被截断了？

4 个答案: