IE：水平滾動填充

我面臨的IE問題，我找不到合適的解決方案。IE：水平滾動填充

比較Chrome和IE我注意到，添加padding-right將被排除在Chrome中的內容寬度和IE中寬度本身的一部分之外。

有沒有適當的解決方案，或者我應該去瀏覽器特定的風格嗎？

如果解釋不夠好，請查看下面提供的代碼段。

.container { 
 
    width: 480px; 
 
    height: 100px; 
 
    border: 1px solid black; 
 
    padding-right: 20px; 
 
    overflow: auto; 
 
    background: red; 
 
} 
 

 
.content { 
 
    display: inline-block; 
 
    white-space: nowrap; 
 
    height: 100%; 
 
    background: blue; 
 
} 
 

 
.item { 
 
    display: inline-block; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 0 10px; 
 
    background: white; 
 
}

<div class="container"> 
 
    <div class="content"> 
 
    <div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div><div class="item"> 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-07-28 Clem

請指定（a）您正在測試哪個版本的IE，以及（b）IE是否以標準模式，兼容模式或怪癖模式呈現頁面。 – Simba

Chrome和IE比較我注意到，添加填充右將從鉻含量的寬度和寬度本身在IE的一部分被排除。

這是頁面以怪癖模式顯示時渲染的主要區別的經典描述。

您可以通過確保您的頁面是有效的HTML（也就是說，它包含所有正確的<html><head>...</head><body>...</body></html>標記）並以有效的DOCTYPE聲明開始來修復呈現模式（您可以使用一些doctype，但最簡單一個是<!DOCTYPE html>）。

做出這些修復，你會發現IE瀏覽器渲染你的填充與Chrome完全一樣。

來源

2016-07-28 15:04:32 Simba

IE：水平滾動填充

回答

相關問題