爲什麼Safari忽略最小寬度和文本對齊？

這片HTML的呈現在頁面右側的「測試」一詞，除了野生動物園，這裏的文字出現在左側頁面的所有瀏覽器：爲什麼Safari忽略最小寬度和文本對齊？

<style> 
#a{ 
    min-width: 100%; 
} 

#b{ 
    text-align: right; 
} 
</style> 

<body> 
<table id="a"> 
<tr> 
    <td id="b"> 
     TEST 
    </td> 
</tr> 
</table> 
</body>

什麼可能會造成這個，以及可能的解決方法是什麼？

這裏是JSFiddle link

來源

2014-01-09 user3179440

您的小提琴在使用WebKit進行渲染（類似到最近的舊版Chrome）時適當地顯示。您是否嘗試清除緩存？你還使用哪種版本的Safari？ –

我重複了結果。我看到在Safari 5.1.8版本在MAC窗口Left側的文字。

我刪除從寬度調用min-並正確顯示了在現在的權利..

http://jsfiddle.net/U87aK/2/

來源

2014-01-09 21:35:22 Phlume

這似乎是正確的解決方案。這個計算器後對'分鐘，width'問題的一些詳細信息：http://stackoverflow.com/questions/7084990/safari-and-chrome-ignore-min-width-css-propery –

同意。 OP接受?? – Phlume

無法複製它在我的版本的Safari（我使用的是7.0版） ;但是你也可以通過CSS的位置屬性來實現相同的效果。

嘗試修改你的CSS這樣的：

#a{ 
    min-width: 100%; 
    position:relative; 
} 

#b{ 
    text-align: right; 
    position:absolute; 
    right:0; 
}

這裏的小提琴：http://jsfiddle.net/z3tT2/

來源

2014-01-09 21:36:28

沒有工作。這會在我的Safari版本的屏幕上拋出測試，並重復出現錯誤。爲了顯示整個單詞「TEST」，我必須將你的小提琴調整到「-29」。http://jsfiddle.net/z3tT2/1/ – Phlume

@Phlume我正在使用Safari v7.0。你的更新提琴渲染切斷了我的。至少我們確信這是一個瀏覽器兼容性問題。 –

我犯罪嫌疑人（從類似，但更復雜的情況下），一些舊的Safari瀏覽器版本忽略CSS被聲明爲ID-僅標籤（如您#a和#b做）。

你能告訴我，如果這個工程（有問題的瀏覽器）？

<style> 
#a table{ 
    min-width: 100%; 
} 

#b td{ 
    text-align: right; 
} 
</style> 

<body id="a"> 
<table> 
<tr id="b"> 
    <td> 
     TEST 
    </td> 
</tr> 
</table> 
</body>

注意：這不是應該如何編碼，而是瀏覽器工作方式的演示（或不演示）。

來源

2014-03-29 08:35:35 Dirk

對於Safari瀏覽器，我們可以使用

min-width: 0;

因爲Safari瀏覽器具有最小寬度的問題：汽車; ||最小寬度：100％;

來源

2016-07-19 19:25:05 Catto

我用min-width: auto我正式變更爲min-width: 0，事情偉大的工作。另一個可能提供更多見解的答案 - Safari and Chrome ignore min-width CSS propery

來源

2017-12-18 10:49:09 user2756335

爲什麼Safari忽略最小寬度和文本對齊？

回答

相關問題