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

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

将底部和顶部设置为零使元素的高度达到 100%。它从最顶端开始，到最后结束。浏览器中的结果不同是由于显示 table 属性的不同实现。如果将其设置为 table-cell，您将能够看到两种浏览器中实际发生的情况。

以下是如何使元素位于屏幕中央。

.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

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

Different result of fixed element CSS in Chrome and Firefox

html

css

firefox

google-chrome

css-position