1、盒子模型問題:請CSS重置 2、按鈕不對齊:請浮動或者vertical-align:middle;然後計算寬高,使其對齊 ; 3、IE8文本不居中:line-height屬性 註意:IE8不支持font寫法(或者某個樣式不支持) IE瀏覽器測試到IE8,IE5、6、7慎用。 問題原因:盒子模型 ...
1、盒子模型問題:請CSS重置
2、按鈕不對齊:請浮動或者vertical-align:middle;然後計算寬高,使其對齊 ;
3、IE8文本不居中:line-height屬性 註意:IE8不支持font寫法(或者某個樣式不支持)
IE瀏覽器測試到IE8,IE5、6、7慎用。
問題原因:盒子模型
1、盒子模型:
在頁面放2個input,一個text文本框,一個button按鈕(設置寬高,無任何其他樣式)
input[type='text']{width:400px;height:45px;}
input[type='button']{width:45px;height:45px;}
觀察:IE8:文本框border:1px;padding:2px;
按鈕border:3px;padding:1px 8px;
火狐:文本框border:1px;padding:2px;
按鈕border:3px;padding:0px 8px;
谷歌:文本框border:2px;padding:1px 0px;
按鈕border:2px;padding:1px 6px;
添加樣式,讓border,padding一樣
input[type='text']{width:400px;height:45px;border:1px solid red;padding:0;}
input[type='button']{width:45px;height:45px;border:1px solid red;padding:0;}
觀察:
IE8:文本框border:1px;content:202x47 (IE的盒子模型)
按鈕border:1px;content:45x45 (IE的盒子模型)
火狐:文本框border:1px;content:200x45
按鈕border:1px;content:43x43
谷歌:文本框border:1px;content:200x45
按鈕border:1px;content:43x43
2、按鈕對齊方法:浮動(原因是Offset不同沒有搜索更多的知識,可以自己補充這方面的知識);
input[type='text']{width:400px;height:45px;border:1px solid red;padding:0;float:left;}
input[type='button']{width:45px;height:45px;border:1px solid red;padding:0;float:left;}
參考第2步,自行計算寬高,使其對齊(有的可能沒有border,用的背景色代替,請設置border:0;高度自行調整)
input[type='text']{width:400px;height:45px;border:1px solid red;padding:0;float:left;}
input[type='button']{width:47px;height:47px;border:1px solid red;padding:0;float:left;}
3、IE8文本居中:line-height 註意 IE8不支持font寫法
將font:normal 18px "微軟雅黑";換成font-size:18px;font-style:normal;font-family:"微軟雅黑"!
或者(這樣可以用font:normal 18px "微軟雅黑";寫法,但是有點不是在正中間)
input[type='text']{width:400px;height:25px;padding:10px 0px;border:1px solid red;float:left;}
input[type='button']{width:47px;height:47px;line-height: 47px;border:1px solid red;padding:0;float:left;}