輸入類型提交100％寬度與輸入類型文本

我有一個登錄表單，其樣式是將文本框和提交按鈕延伸至容器大小的100％。這是爲流動的移動佈局，但我的jsbin例子下面有一個固定的容器大小用於演示目的。輸入類型提交100％寬度與輸入類型文本

在IE7，IE8，FF 4，Safari瀏覽器 - 所有渲染提交按鈕比文本框短一點。 Firebug的佈局工具顯示寬度爲500px的文本框，但寬度爲498px的提交按鈕。在我的真實例子中，提交按鈕是6px瘦。我怎樣才能解決這個問題，所以它佔據了整個寬度？

更新

我通過設置在輸入一個固定的寬度做了另一個測試。似乎提交按鈕不遵循框模型。我使用了100px的寬度，它顯示了98px + 2px的邊框，而文本框顯示了100px的寬度+ 2px的邊框。

所以，我想問題是我該如何處理流體佈局中的這個問題？按鈕上的-1px左右填充似乎不起作用，並且設計需要按鈕上的1px邊框！我需要訴諸js嗎？

來源

2011-07-08 ScottE

某處可能有填充或邊距。嘗試給予'{padding：0px; margin：0px};' – Balanivash

jsbin示例將margin和padding設置爲0 – ScottE

有趣。當我用jsbin的實時預覽查看代碼時，它看起來沒問題。但它似乎錯誤時，只是使用渲染功能 –

出於某種原因，Mozilla瀏覽器設置文本類型的輸入-moz-box-sizing:content-box;，但提交按鈕被設置爲-moz-box-sizing:border-box;

設置下面就給您在FF預期的渲染。

.login-tb { 
    border:1px solid red; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    box-sizing:border-box; 
    margin: 0; 
    padding: 0; 
    width:100%; 
}

更新： 新增Safari和IE8 +支持

來源

2011-07-08 14:24:55 Jrod

+1即將發佈。造成這種混亂的原因是因爲從來沒有定義瀏覽器在呈現輸入時應該遵循什麼模式，所以有些人只是堅持使用幾年前使用的表單輸入，而仍然使用繃帶的每個供應商只使用它自己的推理處理它。這個爛攤子還在今天左右，但幸運的是，我們正在改善這一點。不過IE仍然會脫離這個。 – easwee

有趣。這存在於css3中，但這對 ScottE

IE8似乎支持css3等效，只要它不在怪癖模式。 – ScottE

確實很奇怪。我認爲1px邊框被添加到文本輸入的外部，所以它的寬度是500px。

雖然提交按鈕按鈕被計算在側面，但顯示在裏面，所以你得到500像素 - 1像素 - 1像素= 498px寬...

一個可能的解決方案，你可以做的就是創建以下CSS：

.login-tb { 
    border: 1px solid red; 
    margin: 0; 
    padding: 0; 
    width: 500px; 
} 

#login-tb { 
    border: 1px solid red; 
    margin: 0; 
    padding: 0; 
    width: 502px; 
}

這解決了您的問題，它仍然顯示您的提交按鈕在Firebug中爲500px寬。而且，無論如何，您的表單設置爲500px寬度，並且這不會更改，因此在實現百分比寬度設置方面沒有多大用處。

來源

2011-07-08 14:23:07 Jules

問題是我正在處理流體佈局 - 我無法使用固定寬度的輸入。 – ScottE

我相信這是瀏覽器計算輸入[type = submit]尺寸的方式。我嘗試應用一些重置，但那些似乎也沒有工作。我在Mac上使用Chrome瀏覽器，在您的JSBin示例中，實時預覽看起來很好，但「渲染」驗證了您的問題。

我試過jsfiddle.net，它顯示了同樣的問題。這是一個解決方法，如果這將爲您的應用程序飛行。只需刪除提交按鈕和風格的邊框和背景包裝DIV代替，然後把一個點擊監聽器的div來提交表單：

CSS：

form { 
    width: 500px; 
    padding:0; 
    margin:0; 
} 
form div, form div input { 
    height:20px; 
    margin-bottom:4px; 
} 
input[type=text] { 
    width: 100%; 
    border: 1px solid red; 
    padding: 0; 
    margin: 0; 
} 
#submit input{ 
    background:transparent; 
    margin:auto; 
    border:none; 
} 
#submit{ 
    text-align:center; 
    background-color:#CCC; 
    width: 100%; 
    border: 1px solid red; 
    padding: 0; 
    margin: 0; 
    cursor:pointer; 
}

JQUERY：

$('#submit').click(function(){ 
    $('#login').submit(); 
}); 

$('#login').submit(function(){ 
    alert('form submitted'); 
    return false; 
});

http://jsfiddle.net/pZcx4/

備選NATIVE JS：

function submit_form() 
{ 
    alert('form submitted'); 
    return false; 

    // when you are ready, do this: document.forms['login'].submit(); 
} 


document.getElementById('submit').addEventListener('click',submit_form,false);

http://jsfiddle.net/pZcx4/3/

來源

2011-07-08 14:24:34 AlienWebguy

不幸的是，我將無法使用jQuery庫。此外，提交按鈕有圓角（css3） - 這有點複雜。 – ScottE

您可以輕鬆地將圓角應用於div包裝。你用什麼庫爲JS？ – AlienWebguy

我們沒有使用js庫。這是一個移動應用程序。 jquery mobile已經被客戶摒棄了。與通常的銀行客戶一樣，他們擔心安全問題。我們試圖教育，但沒有任何意義上的爭論。 – ScottE

不知道這會爲你的環境中工作。當我與jsbin發揮，調整width工作...

.login-tb { width: 99.75%; border: 1px solid red; padding: 0; margin: 0; }

只在Chrome測試。

來源

2011-07-08 15:27:33

不，它不會工作。它是流體 - 所以容器將有一個未知的寬度。 – ScottE

在我發佈之前，在我的jsbin中將'width'從'500px'重置爲'100％'時，它對我有效。 –

輸入類型提交100％寬度與輸入類型文本

回答

相關問題