JinJin 的視覺設計專區 :: 網頁設計與語法（HTML/CSS）

Changed By: HP
Change Date: September 26, 2011 05:21PM

[CSS] 搜尋列(input type="submit")高與寬的控制：中華民國司法院首頁為例

相容性觀察說明及截圖：http://mepopedia.com/forum/read.php?804,15128,15168#msg-15168
--

「搜尋列」主要<form>這個功能構成，裡面包括兩個部份

1. 文字輸入列：<input type="text">

2. 「送出」按鈕：<input type="submit">

而瀏覽器呈現「高與寬」的差異主要就是在對以上三者解讀不同所造成的。

IE submit default settings:<pre>
input[type="button"], input['type="submit"] {
padding: 1px 8px;
border: 3px;
margin: 0;
}
</pre>
Firefox submit default settings:<pre>
input[type="button"], input['type="submit"] {
padding: 0 6px;
border: 3px;
margin: 0;
}
</pre>
Chrome submit default settings:<pre>
input[type="button"], input['type="submit"] {
padding: 1 6px;
border: 2px;
margin: 2px;
}

以司法院首頁為例，<form>所代表的版面模型為：

IE:

Firefox5:
寬：150 高：46 Margin-bottom: 14

Chrome12:
寬：150 高：52 Margin-bottom: 14}</pre>

以司法院首頁為例，<form>所代表的版面模型為：

IE:

Firefox5:
寬：150 高：46 Margin-bottom: 14

Chrome12:
寬：150 高：52 Margin-bottom: 14

Changed By: HP
Change Date: September 26, 2011 05:05PM

[CSS] 搜尋列 type="submit")bmit")高與寬的控制：中華民國司法院首頁為例

相容性觀察說明及截圖：http://mepopedia.com/forum/read.php?804,15128,15168#msg-15168
--

「搜尋列」主要<form>這個功能構成，裡面包括兩個部份

1. 文字輸入列：<input type="text">

2. 「送出」按鈕：<input type="submit">

而瀏覽器呈現「高與寬」的差異主要就是在對以上三者解讀不同所造成的。

efault settings:<pre>
input[type="button"], input['type="submit"] {
padding: 0 6px;
border: 3px;
margin: 0;
}
</pre>
Chrome submit default settings:<pre>
input[type="button"], input['type="submit"] {
padding: 1 6px;
border: 2px;
margin: 2px;
}
argin: 0;
}
</pre>
Chrome submit default settings:<pre>
input[type="button"], input['type="submit"] {
padding: 1 6px;
border: 2px;
margin: 2px;
}

以司法院首頁為例，<form>所代表的版面模型為：

IE:

Firefox5:
寬：150 高：46 Margin-bottom: 14

Chrome12:
寬：150 高：52 Margin-bottom: 14}</pre>

以司法院首頁為例，<form>所代表的版面模型為：

IE:

Firefox5:
寬：150 高：46 Margin-bottom: 14

Chrome12:
寬：150 高：52 Margin-bottom: 14

Original Message

作者: HP
Date: August 03, 2011 01:17AM

[CSS] 搜尋列bmit")高與寬的控制：中華民國司法院首頁為例

相容性觀察說明及截圖：http://mepopedia.com/forum/read.php?804,15128,15168#msg-15168
--

「搜尋列」主要<form>這個功能構成，裡面包括兩個部份

1. 文字輸入列：<input type="text">

2. 「送出」按鈕：<input type="submit">

而瀏覽器呈現「高與寬」的差異主要就是在對以上三者解讀不同所造成的。

argin: 0;
}

Chrome submit default settings:



input[type="button"], input['type="submit"] {

    padding: 1 6px;

    border: 2px;

    margin: 2px;

}



以司法院首頁為例，<form>所代表的版面模型為：



IE:



Firefox5:

寬：150 高：46 Margin-bottom: 14



Chrome12:

寬：150 高：52 Margin-bottom: 14}

以司法院首頁為例，<form>所代表的版面模型為：

IE:

Firefox5:
寬：150 高：46 Margin-bottom: 14

Chrome12:
寬：150 高：52 Margin-bottom: 14

Change History

Original Message