html - 固定元素 CSS 在 Chrome 和 Firefox 中的不同结果

Question

我有这个 html:

<div class="lightbox">          
    <div class="lightbox-content-wrapper">
        <div class="lightbox-content-inner-wrapper">                    
            <div class="lightbox-content">
                <!-- Popup Form -->
                <div class="lightbox-form-wrapper">
                    Test
                </div>
            </div>
        </div>             
    </div>
</div>

和这个 CSS:

.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  background: rgba( 0, 0, 0, .7 ) repeat;
}

.lightbox-content-wrapper {
  background-color: #FFF;
  width: 20%;
  position: fixed;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: table;
  text-align: center;
  border: 10px solid #2980B9;
}

这是 fiddle :http://jsfiddle.net/p2omaw29/1/ .

我想创建一个放在屏幕中央的灯箱。如果你在 Chrome 和 Firefox 中打开 fiddle，你可以看到它给出了不同的结果。在 Chrome 中，该框位于屏幕的正中央，而在 Firefox 中，它位于顶部，就好像 bottom: 0; 规则不起作用一样。

那么到底是什么让结果不同呢？我已经调整了一些 CSS 一小时但没有结果。

提前致谢!

Answer 1

将 bottom 和 top 设置为零，以某种方式为元素提供 100% 的高度。它从最顶端开始，到最后结束。 结果在浏览器中的不同是由于显示表属性的不同实现。如果将其设置为表格单元格，您就可以看到两种浏览器中实际发生的情况。

这里是如何让元素位于屏幕中央。

.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    background: rgba( 0, 0, 0, .7 ) repeat;
}

.lightbox-content-wrapper {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    background-color: #FFF;
    width: 20%;
    text-align: center;
    border: 10px solid #2980B9;
}

http://jsfiddle.net/09euw1by/

请注意，它在 Internet Explorer 8 及更低版本中不起作用，您需要为 Internet Explorer 9 添加前缀。

http://www.w3schools.com/cssref/css3_pr_transform.asp