是否有跨瀏覽器的方式來阻止HTML表單元素重疊其容器？

大約一年前，一有人詢問計算器如何水平對齊輸入和textarea元素：input width vs textarea width 是否有跨瀏覽器的方式來阻止HTML表單元素重疊其容器？

我有一些HTML + CSS那裏我想正是這樣做的，但我覺得，無論什麼CSS reset和我使用的基於像素的精確寬度定義的組合，我無法讓我的頁面上的元素排列在右側（左對齊自動發生）。這裏有一些簡單的演示代碼。

<!doctype html> 
<html> 
    <head> 
    <style type="text/css"> 
     * {margin: 0; padding: 0;} /* primitive reset */ 
     body {width: 200px; margin-left:auto; margin-right: auto; 
      border: 1px solid black;} 
     input {border: 1px solid black; width: 200px;} 
     div {border: 1px solid black;} 
     textarea {border: 1px solid black; width: 200px; 
     } 
    </style> 
    </head> 
    <body> 
    <input type="text" value="textinput"> 
    <div>div</div> 
    <textarea>textarea</textarea> 
    </body> 
</html>

如果我改變輸入和textarea的寬度，我可以讓他們排隊，比如鉻。但是，他們不會排隊在Firefox。反之亦然。默認情況下，即使使用CSS重置，一個元素或另一個元素將重疊右側包含的div。如果需要，您可以移除我設置的邊框並使用瀏覽器各自的DOM檢查器。

我花了太多時間來解決這個問題，所以我想知道是否有人在這裏知道我是否試圖做甚至可能。

來源

2010-08-26 Grynszpan

太令人沮喪了！當元素位於div內並且它們與容器的右側重疊時，這是特別糟糕的。 – 2010-08-26 16:22:18

這確實令人沮喪。您最好的選擇是從輸入元素中移除邊框並將其包裹在另一個帶有邊框的固定寬度元素中，例如一個<div>。

<!DOCTYPE html> 
<html> 
    <head> 
    <title>SO question 3577146</title> 
    <style> 
     * { margin: 0; padding: 0; } /* primitive reset */ 
     body { width: 200px; margin: 0 auto; border: 1px solid black; } 
     div { width: 200px; border: 1px solid black; } 
     input { width: 198px; border: 0; } 
     textarea { width: 198px; border: 0; } 
    </style> 
    </head> 
    <body> 
    <div><input type="text" value="textinput"/></div> 
    <div>div</div> 
    <div><textarea>textarea</textarea></div> 
    </body> 
</html>

Here's a jsfiddle demo。

來源

2010-08-26 16:38:40 BalusC

至少在Webkit和FF中，這看起來確實起作用。令人討厭的是額外的div必須被扔進那裏......對我來說，它打破了真正的語義標記點。但我沒有看到任何其他方式來做到這一點。總之：謝謝。 – Grynszpan 2010-08-26 16:45:51

通常，div（和跨度）不具有語義值。至少在搜索引擎優化方面。一些純粹主義者可能不同意這種觀點，但這些純粹主義者通常是HTML開發人員，他們傾向於查看他們訪問的每個網頁的HTML源代碼。 – BalusC 2010-08-26 16:49:34

是否有跨瀏覽器的方式來阻止HTML表單元素重疊其容器？

回答

相關問題