FF 中偏移/边距的原因
尝试通过让父元素具有渐变边框,然后子元素具有常规背景来获得某种渐变边框。
这似乎在 FF 中搞砸了,但在 Chrome 中有效...是否有任何理由说明为什么 FF 添加某种额外的填充/边距/偏移量,但不会使其完全成为 1px 填充?
这真的很烦人,因为你正在看它在 Firebug 中,但额外的部分根本没有显示它来自哪里。它只是“那里”。
我也尝试过使用 CSS 重置样式表来尝试缩小差异,但它仍然存在!
有一种感觉,它是由文档类型引起的,就像在 HTML5 文档类型上一样,我已经让它在 FF7 和 Chrome 中工作了。无法更改 JSFiddle 中的文档类型,因此无法真正测试和共享它。
trying to have some sort of gradiented border by having a parent element have the gradient border and then the child element have the regular background.
This seems to screw up in FF but works in Chrome... is there any reason as to why FF adds some sort of extra padding/margin/offset that doesn't make it entirely 1px padding?
It's really annoying cause you're looking at it in Firebug but the extra part isn't shown where it comes from at all. It's just 'there'.
I've tried using CSS reset stylesheets in there as well to try and make the differences minor but its still there!
Got a feeling that its caused by the doctype as on an HTML5 doctype I've got it working in FF7 and Chrome. Can't change the doctype in JSFiddle so can't really test and share it like that.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
Firefox 在按钮上有一些内部填充,用于放置焦点轮廓。
您可能希望将
button::-moz-focus-inner
样式设置为没有边框或填充。也就是说,对于按钮样式的特殊情况,操作系统和浏览器在其他方面有所不同,所以这个东西并不能真正保证工作......
Firefox has some internal padding on buttons where it puts the focus outline.
You probably want to style
button::-moz-focus-inner
to have no border or padding.That said, for the particular case of buttons styling differs in various other ways by OS and browser, so this stuff is not really guaranteed to work...