Question

我遇到了困扰我的问题。行高似乎基于先前字体大小的继承。

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>

结果：

enter image description here

期望的结果：

enter image description here

有什么想法吗？

Here's a link to the test page

Answer 1

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

<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编辑器来生成这些东西，这是相当不可思议的！

Answer 2

尝试这样做：

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

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

希望这有助于：）

Answer 3

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

br {
  display: none;
}

但不建议这样做。

Answer 4

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

我不喜欢你的方法的行高，但我不知道你想要做什么。

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

.textruta{
  overflow: hidden;
}
.textruta > p{
  line-height: 80%;
}

Answer 5

奇怪！

我通过改变头来解决它：

<!DOCTYPE html>

<强>向

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

任何人都知道为什么？：）

线高不起作用

5 个答案: