Question

不知道它是否有正常的解释或是否是某种类型的外部行为，但我已经面临HTML中的下一个问题：

我有以下段落：

<p>
    You have <strong>32</strong> items
</p>

没有什么特别的，工作得很好。（结果：您有 32 项目）

但如果我添加以下样式：

<p>
  You have <strong>32</strong> items
</p>
<p style="height:20%;">
  You have <strong>32</strong> items
</p>

“强”中的数字会丢失前后的空格。（结果：您有 32 项目）

为什么？

P.D：它与“b”标签的行为相同。

更多信息：

我正在使用IIS服务器在Chrome和Firefox中进行测试（均失败）。我无法在Fiddle中重现它，所以它可能是我在代码中遗漏的东西......

更多信息：

这是完整的scss：

$header_height: 10%;
$footer_height: 20%;
$body_height: 100% - ($header_height+$footer_height);

$container_frame_padding: 0.5em;


html{
    height:100%;

body.vcAllowOverflowContent{
    height:100% !important;

    .vcPopupContainer{
        height:100%;

        .vcPopupTitle{
            height:$header_height;
            display:flex;
            justify-content:center;
            font-size:$bigger_font_size;
            padding:$container_frame_padding;
        }
        .vcPopupBody{                
            height:$body_height;
            border: solid black 1px; 
            overflow:auto; 
            padding:$container_frame_padding;
        }
        .vcPopupFooter{
            height:$footer_height;
        }
    }
}

}

这里有一个更完整的HTML：

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>MutipleDelete</title>

    @Styles.Render("~/Content/Bootstrap")
    <link rel="stylesheet" type="text/css" href="~/Content/vcPopups.min.css" />
</head>
<body class="vcAllowOverflowContent">
    <div class="vcPopupContainer">
        <p class="vcPopupTitle">
            ¿Desea borrar estos <strong>@Model.Count</strong> pacientes?
        </p>
        <div class="vcPopupBody">
            ...
        </div>
        <div class="vcPopupFooter">
            ...
        </div>

        @Scripts.Render("~/Scripts/Jquery")
        @Scripts.Render("~/Scripts/Bootstrap")
    </div>
</body>
</html>

如你所见，我正在使用Bootstrap和Razor。

如果我删除“vcPopupTitle”类，该段落表现正常。

Answer 1

强烈建议（自HTML 5开始），如果可能（即使不是），请使用span class =＆＃34; foo＆＃34;然后应用font-weight：bold;到这个类，而不是使用HTML标签进行文本格式化。并且您无法在％上设置文本宽度，必须使用px，em或rem，请参阅下面的示例：

＆＃13;

p{font-size:1.2rem;}
p.ps{font-size:1.6rem;}
span.foo{font-weight:bold;}
div.container{height:86px; overflow:auto; border:0.1rem solid black;}
.section1{height:40%; border:0.3rem solid blue;}
.section2{height:60%; border:0.3rem solid red;}

＆＃13;

<div class="container">
 <div class="section1">
  <p>
   You have <strong>32</strong> items
  </p>
 </div>
 <div class="section2">
  <p class="ps">
  You have <span class="foo">32</span> items
  </p>
 </div>
</div>

＆＃13;

注意标签默认属性以及每个属性。 P标签是一个段落，不能采取高度属性＆＃34;原样＆＃34;。它需要100％的容器宽度和所需的高度。如果要限制p标签的高度，则必须将此p的容器限制为强制限制为自我P标记。

请注意，如果您尝试将容器强制到一个高度并且内容溢出其父容器，则由于font-size（在这种情况下）不会产生可见效果，因此您需要使用其他字体大小（并最好将其指定为rem，这意味着实际的em）。

Answer 2

好的，问题解决了。

必须使用＆＃34; display：flex;＆＃34;和＆＃34;证明 - 内容：中心;＆＃34;样式。我正在将这些风格应用到＆＃34; p＆＃34;标签，因此其中的元素（文本和强）与中心对齐，并且它们之间的空格被删除。

解决方案：

<div class="vcPopupTitle">
    <p>
        You have <strong>32</strong> items
    </p>
</div>

现在＆＃34; flex＆＃34;显示将对段落起作用，而不是对其元素起作用。

在HTML中高度定义的元素中使用强标记的奇怪行为

2 个答案: