按钮元素中的IE8绝对定位元素是错误的 [英] IE8 absolute positioned elements within button element are wrong
问题描述
标题说明了一切:按键元素的绝对定位子元素在IE8中是错误的。
这是小提琴
这里是强制性的一段代码:
Title says it all: absolute positioned children of a button element are wrong in IE8
Here's a fiddle
And here's the mandatory piece of code:
<button><div></div></button>
<style>
button{
position: relative;
width: 200px;
height: 200px;
border: 0;
background: gray;
}
button div{
position: absolute;
top: 5px;
left: 0px;
width: 100px;
height: 100px;
background: red;
}
</style>
我搜索并尝试了我能想到的一切。也许我应该放弃使用按钮元素: - /
I've searched and tried everything I could think of. Maybe I should abandon using the button element :-/
这里发生了什么?
推荐答案
你需要添加一个溢出:按钮css可见。
You need to add an overflow:visible to the button css.
这是一个小提琴 https://jsfiddle.net/innerurge1/os2e9c2j/7/ 。你也应该用跨度替换div,因为这更具语义性。 Div不是允许按钮,因为它们是块元素,按钮是内联的。
Here is a fiddle https://jsfiddle.net/innerurge1/os2e9c2j/7/. Also you should swap out the divs with spans as this is more semantic. Divs are not "allowed" in buttons, because they are block elements and buttons are inline.
.parent{
position: relative;
width: 200px;
height: 200px;
border: 0;
background: gray;
text-align : left;
overflow:visible;
}
这篇关于按钮元素中的IE8绝对定位元素是错误的的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!