Safari中的文本縮進錯誤或預期的行爲？

我已經把我想要在這裏調試的問題的一個小示範：http://jsfiddle.net/bvDBb/7/。Safari中的文本縮進錯誤或預期的行爲？

在Chrome，Firefox和Opera中，文本縮進按預期工作（或至少是我期望的方式） - 縮進文本的第一行，然後再次執行換行以保持填充正確。

但是，如果在Safari（5.1.7，在OS X 10.7.4）中查看而不是包裝文本，它將創建一個水平滾動條，並將第一行移動到右側 - 並且具有足夠大的縮進部分行被隱藏，你必須滾動才能看到它。

這是Safari中的一個bug，還是我很幸運，剩下的瀏覽器都支持它？

編輯：

添加一個<p></p>圍繞文本的Keith的想法固定佈局（至少在Safari瀏覽器，還沒有試過在Win FF），問題依然存在更像是：什麼是正確的行爲和爲什麼？

來源

2012-05-31 Ivan Vergiliev

嘗試.content

來源

2012-05-31 19:57:16 Keith

嗯，我的觀點不僅僅是爲了避免水平滾動條，而是爲了讓它作爲一個整體正常工作。有了「overflow：hidden」，我甚至失去了第一行的其餘部分。 –

如果你把你的lorem文字換成'

'標籤，它應該可以解決這個問題 – Keith

這確實可以修復它，謝謝！ –

overflow-y:auto;下加入overflow-x:hidden;您應該使用實際的CSS屬性text-indent像這樣的文本縮進。如：「時間」，而不是「像素」

text-indent:30em;

來源

2012-05-31 20:22:54

使用，它可以完美運行既桌面和移動Safari瀏覽器。

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
text-indent: 30px; 
}

來源

2013-09-02 07:52:58 Ansyori

你可以嘗試以下

<div class="contentWrapper"> 
    <div class="content" style="text-indent: 100px;"> 
    <img src="image.jpg" alt="some image" /> 
    <p class="indent-me">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porta mattis lectus, in fringilla magna posuere vitae.</p> 
    </div> 
</div> 

p.indent-me { 
    text-indent:30px; 
}

來源

2017-02-23 09:16:20

Safari中的文本縮進錯誤或預期的行爲？

回答

相關問題