css - IE 7 和 8 背景图像位置问题

标签 css internet-explorer-7

再次,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 中我有完美的输出。

alt text

如果我们查看 IE 7 和 IE8,它会切断左侧部分。 alt text

任何提示,谢谢

问候, 庆

最佳答案

试试这个:(只是减少类的数量等...)如果有效,然后跟踪其他定义中的错误...

<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/

相关文章:

css - Umbraco- 奇怪的样式表问题

css - IE7 z-index 和堆叠

css - 宽度为移动设备/iPad 大小时的 div 定位

jquery - 单击菜单时滑动内容

javascript - ReactJS:需要使用 onClick 函数更改卡片样式

javascript - jQuery 选择器在 IE7/8 中不起作用

html - 框中的 IE7 元素不向右浮动

html - HTML 中的超链接::之后

javascript - jquery固定位置 block ,切换到静态某个点

html - IE7 中奇怪的布局行为(滚动条出现在不应该出现的地方)