CSS Firefox - 頂部填充更改寬度

我有一個響應的網頁，其中我試圖顯示一個模式與圖像內。以下是模態CSS Firefox - 頂部填充更改寬度

<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>

的HTML和下面是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看看你自己的問題。

來源

2013-12-17 yildizkabaran

試試這個：

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

來源

2013-12-17 13:49:54 mcmac

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

，這會幫助你解決問題的寬度。

或者你可以重寫引導的

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

到

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

您也可以參考w3

來源

2013-12-17 13:33:54

這裏是關於邊境一個偉大的文章盒 - http://www.paulirish.com/2012/box-sizing-border-box-ftw/ – Advocation

CSS Firefox - 頂部填充更改寬度

回答

相關問題