gpt4 book ai didi

html - CSS Firefox - 顶部填充更改宽度

转载 作者:太空宇宙 更新时间:2023-11-04 14:12:32 25 4
gpt4 key购买 nike

我有一个响应式网页,我试图在其中显示一个带有图像的模式。以下是模态的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 自行查看问题。

最佳答案

首先提到<!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

关于html - CSS Firefox - 顶部填充更改宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20635353/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com