如題，定義了下列表單按鈕：<button class="btn">Button</button>
<input type="button" class="btn" value="Input Button">
<a href="#" class="btn">A Button</a>樣式：.btn { font: 14px/21px Arial; border: 1px solid #DDD; padding: 5px 10px; background: #FFF; color: blue; text-decoration: none;
}a { display: inline-block;
}運行的時候，chrome 下按鈕的大小一樣了，但是 Firefox 和 IE 下尺寸又不一樣了，有沒有好的解決方法?
2 回答
弒天下
TA貢獻1818條經驗 獲得超8個贊
這個主要是ff和opera下line-height對input['button'],button不起作用，然后還是用padding來做吧，先把line-height置為normal
button, input[type="button"], input[type="submit"] { line-height:normal !important;
}input.button, a.button, button { font: bold 12px Arial, Helvetica, sans-serif; padding: 5px 8px;
}至于一些微小的細節可以使用hack去調整，這樣一來，還有個mac chrome下input submit樣式的問題
還有，貌似IE7下，按鈕的長度會比較長，我是用overflow解決的：
overflow:visible
莫回無
TA貢獻1865條經驗 獲得超7個贊
chrome和firefox會認為type為button的按鈕為border-box盒模型，當然IE也是，但是a卻以正常的content box盒模型渲染，所以，為了渲染一致，你需要將button聲明為content-box?；鸷粹obutton的寬度，padding置為0是不頂用的，需要使用私有屬性，
.btn input, .btn button { -moz-padding-start:npx; -moz-padding-end:npx; }另外，IE9的button寬度在字數超過八九個漢字的時候帶有小數點，這個你得測測，一般按鈕寬度不會超過這么多的字數。
- 2 回答
- 0 關注
- 381 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消