按钮元素中的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屋！