[英]How do I fix CSS padding issues between Firefox & Chrome?
Been at this for hours. 在这几个小时。
I've been using this excellent UI toolkit: http://getuikit.com and so far it's been great. 我一直在使用这个优秀的UI工具包: http : //getuikit.com ,到目前为止它一直很棒。
The problem is styling my results between Chrome and Firefox I set the padding and I achieve this result in Chrome: http://i.imgur.com/dmV13Xw.png As you can see the text is nicely aligned with the start of the input field. 问题是在Chrome和Firefox之间设置我的结果样式我设置了填充,我在Chrome中实现了这个结果: http : //i.imgur.com/dmV13Xw.png正如您所看到的那样,文本很好地与输入的开头对齐领域。
But in Firefox I get this: http://imgur.com/hZRyakg 但是在Firefox中我得到了这个: http : //imgur.com/hZRyakg
I've only just started really so it's frustrating to run into such intractabilities early on! 我刚开始真的开始这么难以在早期遇到这种顽固性!
The HTML markup for the result bit is: 结果位的HTML标记是:
<div class="results-sec`enter code here`tion">
<div id="results-container" class="uk-container uk-container-center uk-width-1-2">
<div class="result">
<a class="result_title" href="#">Bhutan travel advice</a>
<div class="result-url">https://www.gov.uk/foreign-travel-advice/bhutan</div>
<p class="result-summary">Latest travel advice for Bhutan including safety and security, entry requirements, travel warnings and health.</p>
</div>
</div>
And the CSS I'm applying to it: 我正在申请的CSS:
#results-container {
margin-top: 9px;
margin-bottom: 6px;
padding-left: 40px;
padding-right: 160px;
}
I've tried inserting tons of snippets from around SO et al but nothing seems to work. 我试过从SO等人那里插入大量的片段,但似乎没有任何效果。 Tried a seemingly infinite variation of CSS resets too, but the UI kit using integrates normalise.css anyway.
尝试了CSS重置看似无限的变化,但无论如何使用的UI工具包集成了normalise.css。
It's annoying because it seems like such a trivial amount of HTML/CSS. 这很烦人,因为它似乎是如此微不足道的HTML / CSS。
I'm guessing it's something to do with moz/webkit CSS properties but I wouldn't know where to begin to rectify this issue. 我猜这与moz / webkit CSS属性有关,但我不知道从哪里开始纠正这个问题。
What you need is called a CSS reset. 你需要的是一个CSS重置。 http://meyerweb.com/eric/tools/css/reset/
http://meyerweb.com/eric/tools/css/reset/
This isn't going to fix your issues (debugging is all you can do at this point) but in the future you should use a reset before you start and it'll prevent having cross browser issues (for the most part). 这不会解决您的问题(此时您可以进行调试),但将来您应该在启动之前使用重置,这样可以防止出现跨浏览器问题(大多数情况下)。
I think your bug is something other than padding/margin differences between FF and Chrome. 我认为您的错误不同于FF和Chrome之间的填充/边距差异。 Can you try to run your site through the w3c validator, http://validator.w3.org/
你能尝试通过w3c验证器运行你的网站, http://validator.w3.org/
Sometimes that can catch strange bugs caused by mix matched or unclosed elements. 有时,这可以捕捉由混合匹配或未闭合元素引起的奇怪错误。
Another thing I am noticing is that the results appear to be rendering in the same spot in both images relative to your logo. 我注意到的另一件事是,结果似乎在两个图像中相对于您的徽标呈现在相同位置。 Perhaps the issue is with your input length or some surrounding element?
也许问题在于您的输入长度或某些周围元素?
font size in % can override the padding settings . 以%为单位的字体大小可以覆盖填充设置。 Playing with it can help the padding differences
玩它可以帮助填充差异
if you have no option left with u can use browser specifics 如果你没有选择,你可以使用浏览器细节
this is for chrome 这是为铬
@media screen and (-webkit-min-device-pixel-ratio:0) {
.example-box {
width: 76.4%;
}
}
this is for mozilla 这是为了mozilla
@-moz-document url-prefix() {
.example-box {
width: 77.6%;}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.