Question

首先，这是我在这里的第一篇文章，所以如果我做错了，我会道歉。

对我的问题：某个部分包含width: 100%和overflow-x: scroll。
如果我导入字体＆＃39; Open Sans＆＃39;从谷歌突然得到的部分增加了超过100％的宽度，没有内容将因此溢出它。这个问题似乎可以通过删除导入或提供主display: block而不是display: table来解决。

https://jsfiddle.net/ehvpehb6/

再一次，在小提琴中，你不能在该部分中滚动。但是，如果您删除外部资源或更改main的display属性，则可以。

这给我们带来了一个问题：是什么导致了这个？为什么display: table和导入相互冲突？

编辑：该字体的问题似乎只出现在Chrome中，当我在Firefox中尝试时，导入不会导致任何问题。

Image explaining it further

正如@colonelclick建议在CSS中导入字体将解决问题..但是当我在计算机上创建文档并以这种方式测试时却没有。如果我导入<head>中的字体，它也会导致问题。

我的html最终看起来像这样

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>Goot pruject</title>

  <!-- Either this... -->
  <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

  <style>
    /* ...Or this. Both with the same result.
	@import url(https://fonts.googleapis.com/css?family=Open+Sans);
    */
    main {
      width: 100%;
      display: table;
      font-family: 'Open Sans', sans-serif;
    }
    section {
      width: 100%;
      height: 230px;
      overflow-y: hidden;
      overflow-x: scroll;
      white-space: nowrap;
    }
    main figure {
      display: inline-block;
      width: auto;
      margin-right: 30px;
      height: inherit;
      border: 1px solid #b2b2b2;
    }
    main figure img {
      width: inherit;
      height: inherit;
    }
  </style>

</head>

<body>
  <main>
    <section>
      <figure>
        <img src="http://placehold.it/155x230" />
      </figure>
      <figure>
        <img src="http://placehold.it/155x230" />
      </figure>
      <figure>
        <img src="http://placehold.it/155x230" />
      </figure>
      <figure>
        <img src="http://placehold.it/155x230" />
      </figure>
      <figure>
        <img src="http://placehold.it/155x230" />
      </figure>
      <figure>
        <img src="http://placehold.it/155x230" />
      </figure>
      <figure>
        <img src="http://placehold.it/155x230" />
      </figure>
      <figure>
        <img src="http://placehold.it/155x230" />
      </figure>
      <figure>
        <img src="http://placehold.it/155x230" />
      </figure>
      <figure>
        <img src="http://placehold.it/155x230" />
      </figure>
      <figure>
        <img src="http://placehold.it/155x230" />
      </figure>
    </section>
  </main>
</body>

</html>

＆＃13;

燃烧的问题是为什么导入字体会改变布局的工作方式。

Answer 1

您的小提琴设置不正确。

您已将此添加为外部资源，但这不是指向外部文件的链接，这是HTML代码。

<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

有几种方法可以解决这个问题。 他们都需要删除现有的外部资源，这不是一个正确的外部资源字符串。我测试了所有这四个解决方案，并且在你的小提示中修复了错误之后Chrome中的问题就消失了。 / p>

将链接代码放在小提琴的HTML中。

https://fonts.googleapis.com/css?family=Open+Sans' rel ='stylesheet'type ='text / css'＆gt;

仅使用字体网址作为外部资源。

https://fonts.googleapis.com/css?family=Open+Sans

在小提琴的CSS中使用谷歌字体的导入命令。

@import url（https://fonts.googleapis.com/css?family=Open+Sans）;

在小提琴的js部分使用谷歌的js字体加载器。（可在https://www.google.com/fonts#UsePlace:use/Collection:Open+Sans）

导入字体会导致布局不正确

1 个答案: