Question

我有一个我正在建设的网站;我有一个问题，有时我加载页面，文本自己运行。有时只是将鼠标悬停在文本上会导致问题消失，有时我必须重新加载页面。我使用webfonts（谷歌字体）并想知道它是否与此有关。

以下是问题的屏幕截图：

Screenshot

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

修改

根据要求，这是我的代码。我不能在那里展示自己的问题;即使在我的开发网站上也不一致。

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>

Answer 1

试试这个：

#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%。

文字遇到了自己

1 个答案: