：元素定位错误只在IE中：元素正确之前

Question

我在当地公司的网站上工作。我们有一个联系表单，可以弹出您所在的任何页面，接受信息，然后只允许您留在您正在查看的当前页面上。哪个都很好用。

目前我无法弄清楚的是，为什么表单样式的:after元素仅在Internet Explorer中表现得很奇怪。

纸张边角看起来是通过CSS在联系表单元素上呈现的。

在IE10和11中看起来像这样。

CSS如下

    #contact-form{
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
color: #0E0C1F;
background: #F0FBFB;
   }

    #contact-form:after {
content: "";
display: block;
position: absolute;
border: 50px solid transparent;
border-bottom: 50px solid #fefefe;
top: -55px;
right: 666px;
box-shadow: 0px 7px 6px -9px black;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-ms-transform:rotate(-45deg); /* IE 9 */
    }

   #contact-form:before {
content: "";
display: block;
position: absolute;
border: 50px solid transparent;
border-top: 50px solid #fefefe;
top: 547px;
left: 666px;
box-shadow: 0px -7px 6px -9px black;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-ms-transform:rotate(-45deg); /* IE 9 */
    }

正如我在下面的一条评论中指出的那样，我使用Magnific渲染初始弹出窗口，然后从那里设置样式。默认情况下，弹出窗口设置为position: relative;，表单周围的容器也是如此。

我修改了#contact-form ID的样式版本以包含position: relative !important只是在发泄中，奇怪的是覆盖已经设置的positions: relative;这样做没有什么可以修复表单。

包装表单的类如下：

.white-popup-block{background:#FFF;padding:20px 30px 20px 30px;text-align:left;max-width:650px;margin:40px auto;position:relative}

更改底部的填充对IE中的:after元素和纸张边缘阵容产生一些影响，但它只会溢出Firefox和Chrome中纸张角落的位置。

Answer 1

使用:after属性定位bottom以控制定位，而不管IE引起的弹出高度差异。