流體文本框超出容器

我使用第三方工具[jotForm]在wordpress網站上創建表單，我注意到在Firfox中，所有文本框都進入了容器，在鉻和IE的容器中，它們正在放棄。我在文本框上應用了100％的寬度，以便可以在任何分辨率下進行調整。流體文本框超出容器

這裏是不同的瀏覽器 enter image description here

的屏幕截圖，在這裏你可以看到形式http://aite.com.sa/about/

同樣的網址，我注射自定義CSS我的形式

.form-textarea, .form-textbox { 
    padding: 4px 0; 
    border: solid 1px #AAA; 
    outline: 0; 
    font-size:12px !important; 
    font-family: Verdana, Tahoma, sans-serif; 
    background: #fff; 
    box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
    -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
    -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
    width:100% !important; 
    } 
.form-textarea { 
    height: 40px; 
    line-height: 100%; 
    font-family: verdana !important; 
    } 
input:hover, textarea:hover, 
input:focus, textarea:focus { 
    border-color: #C9C9C9; 
    -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px; 
    } 
.form-all{ 
    float:left; 
    padding-top: 0px !important; 
    width:100% !important; 
    } 
.form-input { width: 100% !important; } 
.form-line-error {background:none repeat scroll 0 0;} 
.form-error-message { display: none !important; } 
.form-label-left { 
    display:none; 
    } 
.form-validation-error {border: 1px solid #C85959 !important;} 
.form-button-error { color: #C85959;}

來源

2013-08-04 Awais Imran

刪除來自列表項目的填充並將其添加到列表中，因爲它已添加到100％寬度

.form-line { 
    /* padding: 10px; remove this*/ 
} 

.form-section, .form-section-closed { 
    padding: 10px 
}

來源

2013-08-04 07:15:08

完美吧！非常感謝:) –

此外，我認爲你應該知道，在Safari瀏覽器焦點窗體領域是小故障。紅色輪廓不會出現，直到您點擊新的字段，然後該字段突出顯示之前，它會一直這樣做。 – samrap

問題是在你的標記的幾個級別。

輸入是您的.FORM輸入的寬度的100％你.FORM輸入是你li.form線的寬度你.FORM線比你的形式更寬的100％

檢查這個李

<li class="form-line form-line-error" id="id_3"> 
</li>

而且款式

.form-line { 
    clear: both; 
    padding: 10px; 
    margin: 0px; 
    display: block; 
    width: 97%; 
    width: -moz-available; 
    position: relative; 
}

空白，邊框和填充寬度通常加入到你定義的寬度，所以寬度：97％被添加到每邊10px的填充。你的李太寬了，它的孩子正在填充它。

閱讀框模型。有一個名爲「box-sizing」的屬性可以用來快速修復較新的瀏覽器，但正確理解盒子模型可以節省長期的麻煩。

Here's the official box-model page from the W3C

Here's Chris Coyier's more readable version

來源

2013-08-04 07:26:41 o3fingers

既然你標記的CSS3，檢查箱大小： http://www.paulirish.com/2012/box-sizing-border-box-ftw/

默認情況下，元素的總寬度包括：

給出寬度（在你的情況下100％的容器）
邊界（如果你的邊界1px的，總共增加的2px）
填充

例如：

div { 
    width: 100%; 
    border: 1px solid black; 
    padding: 5px; 
}

這個div將是12px的寬則容器。添加盒大小的CSS：

div { 
    box-sizing: border-box; 
    width: 100%; 
    border: 1px solid black; 
    padding: 5px; 
}

如果您提供盒大小：邊界盒，元件寬度將受到不同的計算，將包括填充和邊界。這第二個div的總寬度將是100％。

這裏有一個工作示例： http://jsfiddle.net/7gW3R/

來源

2013-08-04 07:30:51 Webberig

流體文本框超出容器

回答

相關問題