在所有浏览器中按钮高度均相同
[英]Same button height in all browsers
问题描述
It appears that buttons style differently in every browser. 
似乎每个浏览器中的按钮样式都不同。 I specifically am trying to have all buttons height the same in all browsers. 我专门试图在所有浏览器中使所有按钮的高度相同。 I have tried many different suggestions and posts and I cannot get anything to work. 我尝试了许多不同的建议和帖子，但我什么都无法工作。 I need it to be the same in IE8+, Chrome, and Firefox. 我需要在IE8 +，Chrome和Firefox中保持一致。 Also this is the current doctype I'm using: 这也是我正在使用的当前文档类型：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
This is an old website and I need to maintain that doctype because there is a bunch of deprecated styling that is used. 这是一个旧网站，我需要维护该doctype，因为使用了许多不推荐使用的样式。
If it was html5 then I would just use something like: 如果它是html5，那么我将使用类似：
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"]::-webkit-file-upload-button,
button {
line-height:30px !important;
}
Which works in chrome, but firefox and IE don't seem to be responding to this (maybe because they strictly enforce the particular doctype?) 哪一种在chrome中有效，但是firefox和IE似乎对此没有响应（也许是因为它们严格执行了特定的doctype？）
I know there is a jquery approach, but I'm not trying to check which browser is being called on every postback to style them. 我知道有一个jquery方法，但是我并不是想检查每次回发都调用哪种浏览器来设置样式。
If someone has a silver bullet in css that would be optimal, but I'm willing to settle for a minimalist javascript approach, if one even exists. 如果某人在CSS中有一个灵丹妙药，那是最佳选择，但我愿意采用一种极简主义的javascript方法（如果存在的话）。
1 个解决方案
解决方案1
0 2014-02-19 19:41:09
Shouldn't have an issue with this: 对此应该没有问题：
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"],
button {
height:30px; //Don't use the !important keyword if you can help it!
box-sizing: border-box; //Makes working with dimensions a bit easier
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.