javascript - 文字进入自身 | 文字进入自身

我有一个正在建立的网站；我有一个问题，有时我会加载页面，文本会碰到它本身。有时仅将鼠标悬停在文本上会导致问题消失，有时我必须重新加载页面。我使用webfonts(Google字体)，想知道是否与此有关。

这是问题的屏幕截图:

如果有人知道这里发生了什么以及如何解决它，我将不胜感激。

编辑

这是我的要求的代码。我不能让这个问题表现出来。即使在我的开发站点上，它也不是一致的。

WebFont.load({
  google: {
    families: ['Ubuntu:300,400,700,400italic,700italic:latin']
  }
});

div#wrapper {
  height: 100%;
  display: table;
  table-layout: fixed;
  margin: 0 auto 3em;
}
#wrapper,
header div,
footer div {
  max-width: 900px;
  margin: 0 auto;
  width: 90%;
}
* {
  margin: 0;
  padding: 0;
  font-family: 'Ubuntu', serif;
}
.ajaxcol {
  display: table-row;
  height: 100%;
}
body {
  font-weight: 300;
}
.post,
.page {
  clear: both;
  margin-bottom: 3em;
}
.page {
  margin: 1em 0 0 0;
}
#maincol p,
#sidebar p,
#pagecol p,
td,
li {
  line-height: 1.8em;
}
#wrapper h2,
#wrapper h3,
#wrapper h4,
#wrapper p {
  color: #2E2E2E;
}
p {
  margin: 0.3em 3px 1em 3px;
  width: 100%;
}

<body>
  <div id="wrapper" style="padding-top: 1em; opacity: 1;">
    <div id="pagecol" class="ajaxcol">
      <div class="page">
        <header>
          <h2>Header</h2>
        </header>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dapibus tellus odio, gravida posuere nibh aliquam sed. Sed vulputate maximus nibh malesuada tincidunt. Sed convallis faucibus nisi, imperdiet vehicula arcu sollicitudin finibus.
          Maecenas aliquam neque eros, nec facilisis purus ultricies ac. Praesent feugiat lorem a ipsum interdum ornare. Etiam elit metus, laoreet vel consequat ut, mattis vel mauris. Donec ut libero diam.</p>

      </div>
    </div>
  </div>
</body>

最佳答案

试试这个:

#wrapper, header div, footer div {
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

代替:

#wrapper, header div, footer div {
  max-width: 900px;
  margin: 0 auto;
  width: 90%;
}

width更改为100%。

关于javascript - 文字进入自身，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30996951/