0

我有一个困扰我的问题。行高似乎是基于先前字体大小的继承。

div“textruta”中的代码是由CKeditor生成的，因此有很多废话..

编辑：

这是代码：

<!DOCTYPE html>
<head>
  <meta charset="iso-8859-1">
  <title> timesheets.js :: Slideshow Engine </title>

<link href='http://fonts.googleapis.com/css?family=Frijole' rel='stylesheet' type='text/css'>
<style>

* {
margin: 0;
padding: 0;
}
body {
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 28px;
}
</style>
<div id="textruta" class="textruta" style="width: 280px; height: 116px; position: absolute; top: 100px; left: 120px; visibility: visible;">
<span id="previewtext1">
<p>
<span style="font-size:28px">
    <span style="font-family:frijole">
        <span style="background-color:#FFFF00">Hello There!</span>
    </span>
<br><br>
    <span style="font-size:18px">
        <span style="font-size:26px">
            <span style="color:#FFFFFF"><span style="background-color:#FF0000">123:-</span>
         <br><span style="font-size:18px"><em><span style="background-color:#FF0000">(234:-)</span></em>
         </span>
     </span>
     </span>
     </span>
     </span>
</p>
</span>
</div>

</body>
</html>

结果：

在此处输入图像描述

期望的结果：

在此处输入图像描述

有任何想法吗？

这是测试页面的链接

4

5 回答 5

2

您在这里有一些看起来很严肃的代码：

<div id="textruta" class="textruta" 
     style="padding:10px; height:116px; text-align: left; 
            left:160px; top:100px; width:280px;">
    <p>
    <span style="font-size:28px">
    <span style="font-family:frijole">
    <span style="background-color:#FFFF00">
      Hello There!
    </span>
    </span>
        <br></br>
        <br></br>
    <span style="font-size:18px"><span style="font-size:26px">
    <span style="color:#FFFFFF"><span style="background-color:#FF0000">
      123:-
    </span>
    <br></br>
    <span style="font-size:18px">
    <em>
    <span style="background-color:#FF0000">
      (234:-)
    </span>
    </em>
        </span>
        </span>
        </span>
        </span>
        </span>
    </p>
</div>

您会看到这些硬编码的换行符: <br><br>，这可能是导致额外空白的原因。

您必须使用某种类型的 WYSISWG 编辑器来生成这些东西，这太不可思议了！

于 2013-09-11T13:13:29.327 回答
1

奇怪！

我通过改变头部解决了它：

<!DOCTYPE html>

进入：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

有谁知道为什么？:)

于 2013-09-11T14:38:09.457 回答
0

是的
，如果您可以从 html 中移出或者可以将元素删除到 css 中，则 html 项目会创建额外的空间

br {
  display: none;
}

但不建议这样做。

于 2013-09-11T13:17:52.370 回答
0

首先，（这里是语义）。将您的 textruta div/class 设置为溢出隐藏。您不希望任何应该在容器内的东西在外面吗？所以这是一个好的开始。

我不喜欢你的方法的 line-height ，但我不知道你想要做什么。

无论如何，如果您将顶部段落的行高设置为某种百分比......（这可能是您的错误，也许您将它设置在错误的位置或者没有用户百分比）。它工作得很好。像这样：

.textruta{
  overflow: hidden;
}
.textruta > p{
  line-height: 80%;
}
于 2013-09-11T13:20:15.680 回答
0

尝试这样做：

.hellomessage {
margin-bottom: -20px;
}

没关系，我去了，代码有点长

希望这可以帮助 ：）

于 2013-09-11T13:11:46.207 回答