Question

我有一个响应式网页，我试图在其中显示一个带有图像的模态。以下是模态的html

<div id="open_modal" class="modal">
    <div id="chicken">
        <img src="images/chicken.png" alt="McChicken"/>
        <div class="kosullar" title="lorem ipsum">Katılım Koşulları</div>
    </div>
</div>

以下是我对模态的css

.modal {
  display: block;
  overflow: auto;
  z-index: 1001;
  position: absolute;
  height: 100%;
  overflow: hidden;
  padding-top: 77px;
  padding-bottom: 10px;
  opacity: 1 !important;
}

#chicken{
    height: 100%;   
    color: #fff;
    overflow: hidden;
    text-align: center;
    float:left;
}

#chicken img{
    height: 100%;   
    float: left;
}

.kosullar{
    color: #fff;
    font-size: 10px;
    height: 20px;
    background-color: #2B9BC8 !important;
    float: left;
    position: absolute;
    bottom: 15px;
    padding: 2px;
    text-align: center;
    cursor: pointer;
    border: 1px solid;
    width: 100%;
}

正如你在css中看到的，我已经为模态类添加了77px顶部填充，因此它不会与我的导航栏重叠。除此之外，模态应与显示器具有相同的高度，并且应根据图像的纵横比自动计算其宽度。这在Chrome（以及IE令人惊讶的）上非常有效，但它在Firefox上行为不端。在Firefox上，图像看起来像它应该的那样，但是模态的宽度比应该的宽。具体而言，如果模态上没有填充，则模态的宽度应该是它应该是的。我应该如何修改此CSS，以便Firefox成功计算模态的宽度。您可以访问adwin.com.tr以查看问题。

Answer 1

首先提及<!DOCTYPE HTML>（如果是HTML5），如果您还没有提及然后尝试添加

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */

在你的模态类中，这应该可以帮助你解决宽度问题。

或者你可以覆盖bootstrap的

*, *:before, *:after {
-moz-box-sizing: border-box;
}

到

*, *:before, *:after {
    -moz-box-sizing: inherit;
    }

您也可以参考w3

Answer 2

试试这个：

#chicken img {
    display: block;
    float: none;
    height: 100%;
    margin: 0 auto;
}

CSS Firefox - 顶部填充更改宽度

2 个答案: