Internet Explorer 11 中的绝对定位错误

Question

我在 IE 11 中遇到绝对定位问题。所有其他浏览器都没有这个问题（在 Firefox、Chrome、Opera、Safari 中测试过）。我有相对定位的元素#orazek（标记为绿色），其中包含相对定位的元素#hrob（标记为红色）。在所有其他浏览器中，#hrob 正确定位到它的 parent，但在 IE 11 中，它的行为就像它绝对定位到整个 body。我找不到正确的解决方案。有任何想法吗？谢谢。

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;
}

Answer 1

刚刚将 table-row 更改为 table-cell。现在它在 IE 和 Chrome:

中看起来一样

/* 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-cell;
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;
}

<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>

Internet Explorer 11 中的绝对定位错误

Absolute positioning bug in Internet Explorer 11

css

internet-explorer

internet-explorer-11