带有背景图像按钮的IE 7显示问题

在页面的最底部，三个阅读更多按钮在IE 7中无法正确显示。为什么会这样？我已经尝试了一切！带有背景图像按钮的IE 7显示问题

http://tjonesandson.co.uk/

.readmore { 
    background-image: url("images/readmore-left3.png"); 
    display: block; 
    float: right; 
    height: 24px; 
    margin-top: 10px; 
} 

.readmore a { 
    background: url("images/readmore-right3.png") no-repeat scroll right center transparent; 
    color: #414040; 
    display: block; 
    float: right; 
    font-family: Arial; 
    font-size: 11px; 
    height: 21px; 
    margin-right: -15px; 
    padding: 3px 10px 0; 
    text-shadow: 1px 1px 0 #FFFFFF; 
}

来源

2010-09-02 Solidariti

这里有XP/SP3 + IE7，看起来和Win2k3 + IE8一样。你看起来怎么样了？ – egrunin 2010-09-02 14:04:38

-2

尝试使用严格的，而不是过渡...过渡也好不了多少（如果不一样）怪癖模式。

来源

2010-09-02 12:33:29 Zoidberg

不，不是。只要'doctype'有效，它就会触发标准的合规模式。 – 2010-09-02 12:35:46

好的我已经插入<！DOCTYPE html PUBLIC“ - // W3C // DTD XHTML 1.0 Strict // EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> 但IE 7仍然在按钮上显示溢出。 – Solidariti 2010-09-02 12:43:40

你尝试过overflow：hidden;？ – Zoidberg 2010-09-02 12:49:04

你可以试试这个。设置一个内联块的显示（您可能需要降低填充，顶部和底部）

.readmore a {display:inline-block;}

来源

2010-09-02 13:26:15 jerjer

如果您在a标签则能解决您的问题添加display: block。内联元素通常不具有垂直填充，这就是为什么它在IE中看起来不同。您必须通过将其更改为块级元素来使其行为。添加display: block将解决它。

来源

2010-09-02 16:46:11 Qasim

带有背景图像按钮的IE 7显示问题

回答

相关问题