再次,IE 7 和 8 CSS 挑战。
我有一个背景图像用于应用网页中的所有按钮背景。
这是一段HTML代码
<span class="primary-action message-post"><a href="/t5/forums/postpage/board-id/About" id="link_29" rel="nofollow" class="lia-button lia-button-primary"><span>New Message</span></a></span>
下面是我的CSS代码:
#lia-body .lia-content .primary-action
{
overflow:visible;
}
#lia-body .lia-content .primary-action .lia-button-primary
{
background-image: url("/html/assets/buttons_tcm166-1588.png");
background-position: 100% 0;
background-repeat: no-repeat;
color: #FFFFFF;
display: block;
line-height: 20px;
padding: 0 22px 1px 22px;
white-space: nowrap;
border: none;
font-weight: bold;
overflow:visible;
}
#lia-body .lia-content .primary-action .lia-button-primary:hover
{
background-image: url("/html/assets/buttons_tcm166-1588.png");
background-position: 100% -30px;
background-repeat: no-repeat;
color: #FFFFFF;
display: block;
line-height: 20px;
padding: 0 22px 1px 22px;
white-space: nowrap;
border: none;
font-weight: bold;
}
在 firefox 和 chrome 中我有完美的输出。
如果我们查看 IE 7 和 IE8,它会切断左侧部分。
任何提示,谢谢
问候, 庆
最佳答案
试试这个:(只是减少类的数量等...)如果有效,然后跟踪其他定义中的错误...
<span><a href="/t5/forums/postpage/board-id/About" id="link_29" rel="nofollow" class="lia-button-primary"><span>New Message</span></a></span>
.lia-button-primary {
background-image: url("/html/assets/buttons_tcm166-1588.png");
background-position: 100% 0px;
background-repeat: no-repeat;
color: #FFFFFF;
display: block;
line-height: 20px;
padding: 0px 22px 1px 22px;
white-space: nowrap;
border: none;
font-weight: bold;
overflow:visible;
}
.lia-button-primary:hover {
background-image: url("/html/assets/buttons_tcm166-1588.png");
background-position: 100% -30px;
background-repeat: no-repeat;
color: #FFFFFF;
display: block;
line-height: 20px;
padding: 0px 22px 1px 22px;
white-space: nowrap;
border: none;
font-weight: bold;
}
您提供的代码片段适用于两个版本的 IE...
原回复:
检查您的消息发布类,看看问题是否出在那里...
FYI 更新为:
padding: 0px 22px 1px 22px;
background-position: 100% 0%;
关于css - IE 7 和 8 背景图像位置问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4585841/