文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS按钮滑动门技术，IE8问题

问CSS按钮滑动门技术，IE8问题
EN

Stack Overflow用户

提问于 2010-05-10 15:17:10

回答 1查看 2.6K关注 0票数 1

我使用了滑动门技术，这里解释道：

http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html

除了一个例外，我决定为“悬停”效果再添加一个图像。

我的代码适用于所有浏览器，但IE8除外(可能更早版本)。

提交按钮:active和a.Submit-按钮:活动范围被“悬停”所阻塞，永远不会工作。

有人知道解决这个问题的办法吗？

这是测试页面：http://websvit.com/temp/button.html

提前谢谢！

<style type="text/css">

.clear { /* generic container (i.e. div) for floating buttons */
    overflow: hidden;
    width: 100%;
}

a.submit-button {
    background: transparent url('images/button-1b.png') no-repeat scroll top right;
    color: #fff;
    display: block;
    float: left;
    font: bold 13px sans-serif, arial;
    height: 28px;
    margin-right: 6px;
    padding-right: 18px; /* sliding doors padding */
    text-decoration: none;
    outline: none;
}

a.submit-button span {
    background: transparent url('images/button-1a.png') no-repeat;
    display: block;
    line-height: 14px;
    padding: 6px 0 8px 24px;
} 

a.submit-button:hover {
    background-position: right -28px;
    outline: none;  /* hide dotted outline in Firefox */
    color: #fff;
}
a.submit-button:hover span {
    background-position: 0px -28px;
} 

a.submit-button:active {
    background-position: right -56px;
    color: #e5e5e5;
    outline: none;
}
a.submit-button:active span {
    background-position: 0px -56px;
    padding: 7px 0 7px 24px; /* push text down 1px */
} 

</style>

这个按钮是：

<div class="clear">
<a class="submit-button" href="#" onclick="this.blur();"><span>Hello All</span></a>
</div>

alt文本http://websvit.com/temp/button-1a.png alt文本http://websvit.com/temp/button-1b.png

css

button

cross-browser

sliding-doors

回答 1

Stack Overflow用户

回答已采纳

发布于 2010-05-10 15:56:55

所有浏览器，除了IE8 (可能更早的版本)。

我在IE7查过了你和你的长官。IE6执行正常，但您有一个令人讨厌的png透明度问题。

您可以尝试使用:focus伪类。IE8可能会尊重它不尊重的地方:active。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/2803808

复制

相似问题

问CSS按钮滑动门技术，IE8问题
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS按钮滑动门技术，IE8问题EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS按钮滑动门技术，IE8问题
EN