Safari輸入文本忽略填充頂部

我有一個問題，在輸入文本框中Safari中忽略填充頂部。 Chrome，Firefox或IE都不會出現此問題。我創建了一個JS小提琴顯示問題：Safari輸入文本忽略填充頂部

如果您查看此琴在Chrome中，你可以看到，填充機頂正確呈現。但是，如果您在Safari中查看此提琴，則會忽略填充頂部，並且光標默認放置在輸入的垂直中心。

出於某種原因，默認情況下，Safari似乎在輸入中垂直居中文本。當在源RenderTextControlSingleLine在http://opensource.apple.com/source/WebCore/WebCore-514/rendering/RenderTextControlSingleLine.cpp尋找它：

// For text fields, center the inner text vertically 
// Don't do this for search fields, since we don't honor height for them 
if (!m_innerBlock) { 
currentHeight = innerTextRenderer->height(); 
if (currentHeight < height()) 
innerTextRenderer->setLocation(innerTextRenderer->x(), (height() - currentHeight)/2); 
}

我想知道是否有人知道如何使用CSS或jQuery的或類似的東西來覆蓋此行爲。

來源

2012-04-06 David Silva

我不相信你可以重寫這個行爲，但是你可以使用類似http://jsfiddle.net/Xrpwn/7/（饒恕污點）和捕獲輸入的javascript事件來模擬相同的效果：焦點/模糊添加/將大綱刪除到容器div。

來源

2012-04-06 19:26:54

好的，我希望避免這樣做，但進一步思考我認爲這可能是最好的解決方案。有人知道爲什麼Safari不會改變他們的代碼來匹配所有其他瀏覽器設置的標準嗎？無論如何，我更新了JS小提琴，以添加帶有一點jQuery的UI焦點陰影。 http://jsfiddle.net/Xrpwn/8/感謝您的幫助。 – 2012-04-09 15:11:35

這可能是爲了防止人們試圖做你喜歡的事情=）輸入標籤用於捕獲用戶輸入，而不是真的用於包含標籤等其他元素。在div中包裝標籤和輸入（即使您將div設置爲'看起來像一個大輸入字段'）將成爲您的最佳選擇。 – 2012-04-09 16:56:20

Safari輸入文本忽略填充頂部

回答

相關問題