水平滾動與方向RTL

在Chrome存在與結合方向RTL與margin-right: auto和overflow: auto在頁面上水平滾動條，即使是沒有保證金，沒有內容。水平滾動與方向RTL

有關示例，參見https://jsfiddle.net/ht3drjae/2/。我希望看到沒有綠色的背景顏色，沒有水平滾動條，因爲內部和外部應該有相同的寬度。

滾動條僅在Chrome上存在，但不在Firefox或IE上。那麼爲什麼滾動條在那裏呢？這是一個瀏覽器錯誤？

HTML：

<div class="outer"> 
    <div class="inner"></div> 
</div>

CSS：

body { 
    direction: rtl; 
} 
.outer { 
    height: 500px; 
    overflow: auto; 
    background: green; 
} 
.inner { 
    height: 1000px; 
    margin-right: auto; 
    background: red; 
}

來源

2015-10-08 Mythica

我在想這是因爲左側的滾動條導致了額外的寬度。這可能有所幫助：http://stackoverflow.com/questions/18548465/prevent-scroll-bar-from-adding-up-to-the-width-of-page-on-chrome – deebs

滾動條不會增加元素寬度，它們的widht從元素內容寬度中減去。「滾動條佔用的任何空間都應該從元素與滾動條形成的包含塊中取出（從其大小中減去）。」 http://www.w3.org/TR/CSS21/visufx.html#overflow – Luizgrs

我相信這是一個錯誤：

10.3.3座級，正常流動的非替換元素

使用的值之間必須保持以下約束其他屬性：

'margin-left'+'border-left-width'+'padding-left'+'width'+ 'padding-right'+'border-right-width'+'如果'width'不是'auto'並且'border-left-width'+'padding-left'+ 'width'+'padding-right'+'012'''右邊框寬度「（加上任何的 ‘利潤率左’或‘保證金右’不在‘自動’）比包含塊的寬度，那麼任何較大的‘自動’爲值」餘量對於以下規則，「左」或「右邊距」對待爲零。

如果上述所有的具有比「自動」以外的計算值，該值被說成是「過度約束」，並且所使用的值之一將必須是從它的計算出的值不同。如果包含塊的「方向」屬性具有值「LTR」，的「餘量右」指定值被忽略並計算值，以便使平等真。如果'方向'的值是'rtl'，那麼這個恰好是'margin-left'。

如果只有一個指定爲'auto'的值，則其使用的值爲。

如果'寬度'設置爲'自動'，則任何其他'自動'值變爲'0'並且從結果相等中得出'寬度' 。

如果'margin-left'和'margin-right'都是'auto'，他們使用的值是相等的。這將元素相對於包含塊的邊緣進行水平居中。

http://www.w3.org/TR/CSS2/visudet.html#blockwidth

爲您例如，.inner計算值

margin-left: 0 (initial value) 
border-left-width: 0 (because boder-style initial value is none) 
padding-left: 0 (initial value) 
width: auto (initial value) 
padding-right: 0 (initial value) 
border-right-width: 0 (because boder-style initial value is none) 
margin-right: auto

那麼，什麼應該發生的是：

如果 '寬' 設置爲 '自動' ，其他任何'自動'值將變爲'0'，並且從結果相等中得出'寬度' 。

.inner寬度應該與其父項寬度相同，因此不應出現水平滾動條。

如果我們也改變direction到ltr和margin-left:auto或margin-right:auto不會發生，所以它看起來像只有當方向爲RTL出現問題。

來源

2015-10-08 16:34:42 Luizgrs

我認爲你是對的，這是Chrome中的一個錯誤。我將提交一個錯誤報告，看看他們是否想要修復它。謝謝您的回答。 – Mythica

我希望下面的代碼可以解決問題：

.outer { 
    height: 500px; 
    overflow: hidden;/changed to hidden/ 
    background: green; 
} 

overflow:hidden;

及其總是更好的使用方向的HTML標記像

與不是CSS聲明。

來源

2015-10-08 17:02:03

您需要在body標籤上設置方向：ltr，將整個頁面內容封裝在div中，並將其方向設置爲rtl。

來源

2015-12-28 10:06:12

我遇到了同樣的問題，並且此修補程序完美無缺！ –

水平滾動與方向RTL

回答

相關問題