如何解决Firefox和Chrome之间的CSS填充问题铬？ [英] How do I fix CSS padding issues between Firefox & Chrome?

问题描述

已经过了好几个小时了。

我一直在使用这个优秀的UI工具包： http://getuikit.com ，到目前为止已经很好了。

问题是在Chrome和Firefox之间设置我的结果样式
我设置了填充，我在Chrome中实现了这个结果： http://i.imgur.com/dmV13Xw.png

但是在Firefox中我得到这个： http://imgur.com/hZRyakg

我只有

结果位的HTML标记是：

 < div class =results-sec`enter code here`tion> 
< div id =results-containerclass =uk-container uk-container-center uk-width-1-2> 
< div class =result> 
< a class =result_titlehref =＃>不丹旅游建议< / a> 
< div class =result-url> https：//www.gov.uk/foreign-travel-advice/bhutan< / div> 
< p class =result-summary>不丹的最新旅行建议，包括安全和保安，入境要求，旅行警告和健康。 
< / div> 
< / div> 
  

应用于：

 ＃results-container {
 margin-top：9px; 
 margin-bottom：6px; 
 padding-left：40px; 
 padding-right：160px; 
} 
  

我试过从SO等插入大量的片段，上班。尝试了一个看似无限的CSS重置的变化，但UI工具包使用整合normalise.css反正。

这很讨厌，因为它看起来像这样一个微不足道的HTML / CSS 。

我猜这是与moz / webkit CSS属性有关，但我不知道从哪里开始纠正这个问题。

解决方案

我认为你的错误是除了FF和Chrome之间的填充/边距差异。您可以尝试通过w3c验证程序（ http://validator.w3.org/ ）运行您的网站。 p>

有时可以捕获由混合匹配或未关闭的元素引起的奇怪错误。

我注意到的另一件事是结果似乎在两张图片的相同位置相对于您的徽标呈现。也许问题是你的输入长度或一些周围的元素？

Been at this for hours.

I've been using this excellent UI toolkit: http://getuikit.com and so far it's been great.

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.

But in Firefox I get this: 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:

<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:

    #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. Tried a seemingly infinite variation of CSS resets too, but the UI kit using integrates normalise.css anyway.

It's annoying because it seems like such a trivial amount of 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.

解决方案

I think your bug is something other than padding/margin differences between FF and Chrome. Can you try to run your site through the w3c validator, 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?

这篇关于如何解决Firefox和Chrome之间的CSS填充问题铬？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！