It's been couple of months since I've done some serious HTML/CSS coding, so I've probably missed a lot of things, but today I stumbled upon a really weird thing.
自从我做了一些严肃的HTML / CSS编码以来已经有好几个月了,所以我可能错过了很多东西,但今天我偶然发现了一件非常奇怪的事情。
When I try to apply padding
to a <input type="submit">
, it doesn't work anymore. I'm about 99% sure that I was able to do this, but now it seems as if it was impossible.
当我尝试将填充应用于时,它不再起作用。我大约99%确定我能做到这一点,但现在好像不可能。
I even looked at one of my older projects, where I know I had padding on submit buttons, but they don't work anymore.
我甚至看过我的一个旧项目,我知道我在提交按钮上有填充,但它们不再工作了。
Here's a little demo of the problem
这是一个问题的小演示
<input type="submit" value="Submit" style="padding: 5px 10px;">
<button type="submit" value="Submit" style="padding: 5px 10px;">Submit</button>
and how it looks in Google Chrome 15 on Mac
以及它在Mac上的Google Chrome 15中的外观
but it doesn't seem to work in Firefox 4 at all
但它似乎根本不适用于Firefox 4
Here's a link to the demo source on JSbin.com
这是JSbin.com上演示源的链接
I would bet that this was working about 6 months ago, but something must have changed. I've been using Windows Vista and OS X Snow Leopard with recent upgrade to Lion, but that doesn't seem like it.
我敢打赌,这个工作大约在6个月之前,但一定有些变化。我一直在使用Windows Vista和OS X Snow Leopard,最近升级到Lion,但这似乎不是。
Am I missing something?
我错过了什么吗?
edit: fixing the typo DID NOT help. The padding still isn't applied to the first button.
编辑:修复拼写错误没有帮助。填充仍然不会应用于第一个按钮。
edit2: After going through Adobe Browserlab it looks like this is OS X specific problem. I'd still like to know how to do this even on OS X though.
edit2:经过Adobe Browserlab后,看起来这是OS X特有的问题。我仍然想知道即使在OS X上如何做到这一点。
3 个解决方案
#1
15
This issue was apparent for me too on OS X Firefox. The solution is to disable the browser's default appearance before applying your own:
在OS X Firefox上,这个问题对我来说也很明显。解决方案是在应用自己的浏览器之前禁用浏览器的默认外观:
input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
More info at: http://css-tricks.com/almanac/properties/a/appearance/
更多信息请访问:http://css-tricks.com/almanac/properties/a/appearance/
#2
6
<input type="submit" value="Submit" style="padding: 5x 10px;">
You forgot the p in 5px. That is breaking the styling.
你在5px中忘记了p。这打破了造型。
#3
1
You need to remove browser default style button first, to do that i usually restyle it with change the background and border. Here is the snippet style i use if want to change the button
您需要先删除浏览器默认样式按钮,为此我通常会更改背景和边框。这是我想要更改按钮时使用的片段样式
input[type="submit"], input[type="reset"] {
background: none repeat scroll 0 0 #8C8C69;
border: medium none;
cursor: pointer;
display: inline-block;
padding: 7px;
text-transform: uppercase;
}
#1
15
This issue was apparent for me too on OS X Firefox. The solution is to disable the browser's default appearance before applying your own:
在OS X Firefox上,这个问题对我来说也很明显。解决方案是在应用自己的浏览器之前禁用浏览器的默认外观:
input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
More info at: http://css-tricks.com/almanac/properties/a/appearance/
更多信息请访问:http://css-tricks.com/almanac/properties/a/appearance/
#2
6
<input type="submit" value="Submit" style="padding: 5x 10px;">
You forgot the p in 5px. That is breaking the styling.
你在5px中忘记了p。这打破了造型。
#3
1
You need to remove browser default style button first, to do that i usually restyle it with change the background and border. Here is the snippet style i use if want to change the button
您需要先删除浏览器默认样式按钮,为此我通常会更改背景和边框。这是我想要更改按钮时使用的片段样式
input[type="submit"], input[type="reset"] {
background: none repeat scroll 0 0 #8C8C69;
border: medium none;
cursor: pointer;
display: inline-block;
padding: 7px;
text-transform: uppercase;
}