您好,我似乎在 Firefox 在提交按钮中添加 2 个额外像素的填充时遇到了一些问题。我已经在 chrome 和 IE9 中对此进行了测试,两种浏览器都可以正常渲染代码,Firefox 似乎在底部添加了 2 个像素填充提交按钮,右上角有钥匙背景。这是网站:
www.thanathos.host22.com http://www.thanathos.host22.com/
这是该网站的代码:
<form method="post" action="index.html">
<input type="text" value="Username"/>
<input type="text" value="Password"/>
<input type="submit" id="submit" value=""/>
<img src="img/header/key.png" alt="" id="key"/>
</form>
header section form input{
color:#b3aaaa;
border:1px solid #cccccc;
float: left;
padding:5px 8px;
margin-left: 6px;
}
我该如何纠正这个问题?
如果没有解决方案,任何人都可以为我提供一个解决方案,其中输入文本与输入提交相同并且输入文本从上到下居中?
EDIT:我在另一台计算机上检查过这一点,似乎 Firefox 正确地呈现了这一点。我以前遇到过这种类型的问题,相同的浏览器版本在不同的计算机上显示的网站有点不同。上次在 chrome 中发生类似的情况。我永远无法解决这个问题。
有人知道为什么同一个浏览器在具有相同屏幕尺寸和分辨率的不同计算机上呈现不同的页面吗?
我遇到了这样的问题。然后我发现了这个CSS
解决问题的东西:
input::-moz-focus-inner { border:0; padding:0 }
此博文的评论中给出了该解决方案:
Bulletproof CSS 输入按钮高度 http://cbjdigital.com/blog/2010/08/bulletproof_css_input_button_heights
正如帖子所说:发生这种情况是因为 Firefox(用户代理)拥有CSS
风格用途!important
以及人们试图做的任何事情来推翻CSS
属性将不会被应用。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)