【发布时间】：2015-05-06 03:25:06
【问题描述】：
我在 IE 11 中遇到绝对定位问题。所有其他浏览器都没有这个问题（在 Firefox、Chrome、Opera、Safari 中测试）。我有相对定位的元素#obrazek（标记为绿色），其中包含相对定位的元素#hrob（标记为红色）。在所有其他浏览器中，#hrob 已正确定位到其父级，但在 IE 11 中，它的行为就像绝对定位到整个主体一样。我找不到正确的解决方案。有任何想法吗？谢谢。
HTML（删除了简化/不必要的内容）：
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>My title...</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="container1">
<div id="container2">
<div id="obrazek">
<img src="obrazky/hrob.svg" alt="Obrázek hrobu" class="obrazek" />
<div id="hrob">
<p class="napis pismo42">Username</p>
<p class="napis pismo24">Text under the name</p>
</div>
<p>text...</p>
</div>
</div>
</div>
</body>
</html>
CSS style.css：
/* CSS Document */
body {
background-image: url('obrazky/pozadi.svg');
background-size: 100% auto;
background-color: #000;
background-repeat: no-repeat;
}
#container1 {
margin: 0px auto;
width: 1020px;
}
#container2 {
background-color: rgba(255, 255, 255, 0.9);
width: 890px;
height: 340px;
border: 15px solid #000;
border-radius: 30px;
padding: 30px;
margin: 20px;
-webkit-box-shadow: 0px 0px 20px 10px rgba(170, 170, 170, 0.8), 10px 10px 10px #ddd inset;
-moz-box-shadow: 0px 0px 20px 10px rgba(170, 170, 170, 0.8), 10px 10px 10px #ddd inset;
box-shadow: 0px 0px 20px 10px rgba(170, 170, 170, 0.8), 10px 10px 10px #ddd inset;
display: table;
}
#obrazek {
float: left;
position: relative;
width: 340px;
display: table-row;
border: 3px solid green;
}
.obrazek {
width: 340px;
height: 427px;
}
#hrob {
position: absolute;
width: 220px;
height: 300px;
left: 75px;
top: 70px;
text-align: center;
border: 3px solid red;
}
.napis {
text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
color: #4a4a4a;
}
.pismo42 {
font-size: 42px;
}
.pismo24 {
font-size: 24px;
}
【问题讨论】：
标签： css internet-explorer internet-explorer-11