需要帮助解决 IE8 中的 CSS 问题吗？

发布于 2024-11-02 16:30:58 字数 1317 浏览 1 评论 0原文

大家好，我的样式表（即 ie 8）遇到了一些跨浏览器问题。

下面的 css 在我的 chrome/ff 样式表中工作正常，但对于我的 ie 样式表根本不起作用。

#threetwoBTN {
background-repeat: no-repeat;
background-image: url('../images/32Button_BG01.png');
}
a#threetwoBTN:hover {
background-repeat: no-repeat;
background-image: url('../images/32Button_BG02.png');
}

在 IE 中，以下是我所能得到的。

#threetwoBTN {
background-repeat: no-repeat;
background-image: url('../images/32Button_BG01.png');
}

我可以应用我的背景图像，仅此而已，我想要的悬停效果在 IE8 上根本不起作用。下面是我的标签的结构：

    <div class="ContentBody">
    <div class="LeftContentBody">
        <br/>
            <!-- another div but ignored for example! -->
        <br />
        <a id="threetwoBTN">Download 32-Bit</a>
        <p>
            * ...
        </p>

为每个“a”标签设置的 id 允许我按照希望的方式定位和设置每个锚点的样式，因为每个标签都有不同的背景和效果等。有人可以帮我解释一下这个与 IE 相关的内容吗？问题？

更新：

文本从页面缩进，因此用户看不到锚标记之间的文本。这意味着该按钮仅由背景图像组成。为了清楚起见，我已将其粘贴在用于设置锚标记样式的 css 下方。

.LeftContentBody a {
font-size: 10px;
text-indent: -1500px;
width: 124px;
height: 62px;
border: 2px solid #000000;
margin-left: 32px;
margin-bottom: 32px;
float: left;
clear: left;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}

原文

Hi guys I am having some cross browser issues with my style sheets namely ie 8.

The css below works fine in my chrome/ff style sheet but it does not work at all for my ie stylesheet.

#threetwoBTN {
background-repeat: no-repeat;
background-image: url('../images/32Button_BG01.png');
}
a#threetwoBTN:hover {
background-repeat: no-repeat;
background-image: url('../images/32Button_BG02.png');
}

In IE, below is as far as I can get.

#threetwoBTN {
background-repeat: no-repeat;
background-image: url('../images/32Button_BG01.png');
}

I can apply my background image and thats about it, the hover effect I want that works above does not work at all IE8. Below is the structure of my tags:

    <div class="ContentBody">
    <div class="LeftContentBody">
        <br/>
            <!-- another div but ignored for example! -->
        <br />
        <a id="threetwoBTN">Download 32-Bit</a>
        <p>
            * ...
        </p>

The id set to each 'a' tag allows me target and style each anchor the way want it to look as each tag has different backgrounds and effects and etc. Can someone please help me explain this IE related issue?

UPDATE:

The text is indented off the page, so the user doesn't see the text between the anchor tags. This means the button is made up of a background image that's all. For clarity I have pasted in below the css I am using to style the anchor tag.

.LeftContentBody a {
font-size: 10px;
text-indent: -1500px;
width: 124px;
height: 62px;
border: 2px solid #000000;
margin-left: 32px;
margin-bottom: 32px;
float: left;
clear: left;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

城歌 2024-11-09 16:30:58

您应该将属性 href 添加到您的标记中，尝试使用 # ，它应该可以使用，至少对我来说是这样。

希望有帮助。

#threetwoBTN 
{ 
    background: #CCC;     
} 
#threetwoBTN:hover {
    background: #AAA;
}

<div class="ContentBody">     
<div class="LeftContentBody">         
    <br/>            
     <!-- another div but ignored for example! -->         
    <br />        
    <a href="#" id="threetwoBTN">Download 32-Bit</a>         
    <p>* ...</p> 
</div>
</div>

You should add the attribute href to your tag , try with #, it should work with that, at least it does for me.

Hope it helps.

#threetwoBTN 
{ 
    background: #CCC;     
} 
#threetwoBTN:hover {
    background: #AAA;
}

<div class="ContentBody">     
<div class="LeftContentBody">         
    <br/>            
     <!-- another div but ignored for example! -->         
    <br />        
    <a href="#" id="threetwoBTN">Download 32-Bit</a>         
    <p>* ...</p> 
</div>
</div>

回复收藏 0 原文