gpt4 book ai didi

internet-explorer-8 - IE8 和 IE9 :before and :after elements position absolute are hidden

转载 作者:行者123 更新时间:2023-12-04 01:54:58 25 4
gpt4 key购买 nike

我正在尝试创建一个两端带有“大写”和重复背景的按钮,以保持按钮的大小灵活。

为了做到这一点,我使用了 :before:after CSS 中的伪元素,以及 position:absolute使其超出主按钮的背景覆盖空间(使用负值)。

它适用于 FF 和 Chrome,但在 IE8 和 9 中看起来像,图像在那里,但在按钮“外部”,因此被隐藏。有谁知道如何从按钮中“弹出”这些伪元素,以便它们进行渲染?

我想将 HTML 保留为 <button></button>元素,并且正在使用 SASS。
你可以在这里看到一个 jsFiddle:http://jsfiddle.net/Dqr76/8/或以下代码:

button {
display: inline-block;
zoom: 1;
*display: inline;
border:0;
background-image: url(../images/btn_bg.png);
background-repeat: repeat-x;
color: #fff;
font-weight: bold;
height: 22px;
line-height: 22px;
position: relative;
margin: 0 5px;
vertical-align: top;

&:before {
display: inline-block;
height: 22px;
background-image: url(../images/btn_left.png);
width: 5px;
position: absolute;
left: -5px;
top: 0;
content: "";
}

&:after {
display: inline-block;
height: 22px;
background-image: url(../images/btn_right.png);
width: 5px;
position: absolute;
right: -5px;
top: 0;
content: "";
}
}

只是一个旁注,在有人提出之前,我知道这些伪元素在 < IE8 中不起作用,并且已经创建了一个不会影响这个问题的变通方法。

最佳答案

添加 overflow: visible;到按钮元素,它就会出现。
在此演示 jsFiddle

我发誓我已经试过了,但我想没有。 Thanks to this question

关于internet-explorer-8 - IE8 和 IE9 :before and :after elements position absolute are hidden,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11164634/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com