jquery - Firefox Chrome 行高差异

Question

我一直在努力解决 Joomla 文章中的 Firefox/Chrome 行高问题，其中元素“intro_content”在 Firefox 和 Chrome 中分别需要 line-height = 2em 和 line-height = 1em 才能显示按要求。我试过使用 normalize.css 和 Meyer's reset 但没有成功。所以我尝试了 Modernizr(无论如何我在网站的其他地方使用它)。这是 js:

      var selectEl =  jQuery("p.intro_content"),
      browserFF = Modernizr.addTest('firefox', function (){
          return !!navigator.userAgent.match(/firefox/i).data();
        });
      if(browserFF) {
        selectEl.css("line-height", "2");
      }else{
         selectEl.css("line-height", "1");
      }
       alert(browserFF);

警报返回“object Object”。但是，显示差异仍然存在。 .但是如果将 val() 或 data() 附加到返回表达式，那么

      !!navigator.userAgent.match(/firefox/i).val();      // or  data()  

不显示警报。如果有任何帮助，我将不胜感激

Answer 1

[我之前的评论] 通过查看文档，我想知道，您现在不应该只使用 Modernizr.firefox 来查看您的测试结果吗？

your suggestion to use Modernizr.firefox was spot on. Changing the if condition to "browserFF.firefox" did the trick

我认为您根本不需要 browserFF 变量。您不需要“捕获”Modernizr.addTest 的返回值，因为那将再次成为全局 Modernizr 对象本身。

如此简单地使用

if(Modernizr.firefox) { …

应该可以正常工作。