相关疑难解决方法(0)

我使用Zurb Foundation 3网格创建了一个站点.每个页面都有一个大的h1.

CSS

body {
  font-size: 100%
}

/* Headers */

h1 {
  font-size: 6.2em;
  font-weight: 500;
}

HTML

<div class="row">
  <div class="twelve columns text-center">
    <h1> LARGE HEADER TAGLINE </h1>
  </div>
  <!-- End Tagline -->
</div>
<!-- End Row -->

当我将浏览器的大小调整为移动大小时,大字体不会调整并导致浏览器包含水平滚动以容纳大文本.

我注意到在Zurb Foundation 3 Typography 示例页面上,标题在压缩和扩展时适应浏览器.

我错过了一些非常明显的东西吗 我该如何实现这一目标？

假设我将单个span元素定义为内联块.它的唯一内容是纯文本.当字体非常大时,您可以清楚地看到浏览器如何在文本的上方和下方添加一些填充.

HTML:

span {
  display: inline-block;
  font-size: 50px;
  background-color: green;
}

?

CSS:

<span>BIG TEXT</span>

现场演示:http://jsfiddle.net/7vNpJ/

看一下盒子模型,很明显浏览器在内容边缘添加了填充.我需要删除这个"填充",一种方法是简单地改变行高,如:

http://jsfiddle.net/7vNpJ/1/

这在Chrome中效果很好,但在Firefox中,文字正在向顶部转移(FF17,Chrome 23,Mac OSX).

有没有跨浏览器解决方案的想法？谢谢!