html - 所有浏览器中的按钮高度相同

标签 html css styling

似乎每个浏览器中的按钮样式都不同。我特别试图让所有浏览器中的所有按钮高度相同。我尝试了许多不同的建议和帖子,但我什么都做不了。我需要它在 IE8+、Chrome 和 Firefox 中相同。这也是我正在使用的当前文档类型:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

这是一个旧网站,我需要维护该文档类型,因为使用了一堆已弃用的样式。

如果它是 html5,那么我会使用类似的东西:

input[type="button"], 
input[type="submit"], 
input[type="reset"], 
input[type="file"]::-webkit-file-upload-button, 
button {
    line-height:30px !important;
}

它在 chrome 中有效,但 firefox 和 IE 似乎没有对此做出响应(可能是因为它们严格执行特定的文档类型?)

我知道有一种 jquery 方法,但我并没有尝试检查在每次回发时调用哪个浏览器来设置它们的样式。

如果有人在 css 中有 Elixir 那将是最佳选择,但我愿意接受一种极简主义的 javascript 方法,如果存在的话。

最佳答案

应该没有问题:

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
}

关于html - 所有浏览器中的按钮高度相同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21890586/

相关文章:

wpf - 如何在 WPF 中设置窗口的边框和标题栏的样式?

css - Django 样式问题 - 无法显示图标

android - 当 View 在 FlatList 中时, View borderRadius 样式不适用于 Android

html flex : border around item without expand in height

javascript - 除非更改样式,否则动态创建的 img 不会在 Chrome 中显示 src 图像

css - 如何自定义 Angular Material 的 input/md-input-container 组件?

html - 为什么即使我将 img 设置为 block 元素,我的图像也不能居中?

html - SVG 边框以特定宽度截断

CodeIgniter 中的 Html5 表单验证

css - 避免边框重叠 CSS