Html 页脚被剪掉了？

我的网站的部分页脚在不同的浏览器上被剪切，这让我有些问题

在我的网站上，twitter、rss和共享图标在不同的浏览器上会被切断并稍微移动。我尝试过改变每个图标的背景位置和填充，但我似乎无法让它在不同的浏览器中工作。有没有关于如何解决这个问题的建议

以下是我对页脚的代码：

#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;
}

---

提前感谢您的帮助

我想这可能会有所帮助。将此应用于您的图标：

position:relative;
z-index:99;

---

我想这可能会有帮助。将此应用于您的图标：

position:relative;
z-index:99;

---

尝试使用宽度和高度代替填充。并添加一个

显示：内联块

。例如：

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;
}

---

尝试使用宽度和高度代替填充。并添加一个

显示：内联块

。例如：

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;
}

---

被切断的图标都是空的

a

元素。因为它是一个

内联的

流元素，这意味着它将折叠为默认的文本高度-使用的字体为20像素，而Twitter图标为22像素，因此导致2像素被截断

---

将锚定设置为“显示：内联块”（display:inline block），或适合布局的另一块布局样式，然后设置允许的正确高度，即可解决此问题。

被切断的图标都是空的

a

元素。因为它是一个

内联的

流元素，这意味着它将折叠为默认的文本高度-使用的字体为20像素，而Twitter图标为22像素，因此导致2像素被截断

---

将定位点设置为“显示：内联块”或其他适合布局的块布局样式，以及允许的正确高度，然后解决此问题。

填充在每个浏览器中的工作方式不同，这就是为什么在Chrome中图标会被切断

---

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

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

---

我会用一个特定的宽度和高度来代替。

你重置CSS了吗？例如：{填充：0px；边距：0px}。浏览器为某些元素提供了自己的默认填充和边距，因此上面将其全部重置为0。在我看来，您有一个包裹整个站点的div，并且该div的填充值与页脚中的图标重叠。请尝试将相同的填充值应用于

：hover

。您是否执行了CSS重置？例如：{填充：0px；边距：0px}。浏览器为某些元素提供了自己的默认填充和边距，因此上面将其全部重置为0。在我看来，您有一个覆盖整个站点的div，并且该div的填充值与页脚中的图标重叠。请尝试将相同的填充值应用于

：hover

。不，这不会有帮助，甚至不会远程应用与手头上的问题相关。不，这不会有帮助，甚至与手头上的问题毫无关系。我试过了，但它消失了，只有当你悬停在它上面时才会出现。你忘了加负号。背景位置：0-22.5px；我试过了，但它消失了，只有当你在上面悬停时才会出现。你忘了加负号。背景位置：0-22.5px；