Question

我有以下问题：我开发了一个工具，从HTML标签中提取样式并将它们放入标题中（即它使内联CSS内部）。但是，当有多个CSS类时，行高似乎会有所不同：

这是工具提取之前的示例：调用1个内部CSS类+指定1个内联CSS样式



<html>
<head>
<style>
<!--
 p.MsoNormal, li.MsoNormal, div.MsoNormal
    {margin-top:0cm;
    margin-right:0cm;
    margin-bottom:10.0pt;
    margin-left:0cm;
    line-height:115%;
    font-size:11.0pt;
    font-family:"Calibri","sans-serif";}
-->
</style>
</head>
<body>
<p class=MsoNormal style='text-align:justify;line-height:normal'>
<span style='font-size:20.0pt'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore 
magna aliqua. Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate 
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur 
sint occaecat cupidatat non proident, sunt in culpa qui officia 
deserunt mollit anim id est laborum.</span></p>
</body>
</html>

<html> <head> <style>  </style> </head> <body> <p class=MsoNormal style='text-align:justify;line-height:normal'> <span style='font-size:20.0pt'> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></p> </body> </html>

这是工具提取后的示例：调用2个内部CSS类 - ＆gt;行高呈现不同！

<html>
<head>
<style>
<!--
 p.MsoNormal, li.MsoNormal, div.MsoNormal
    {margin-top:0cm;
    margin-right:0cm;
    margin-bottom:10.0pt;
    margin-left:0cm;
    line-height:115%;
    font-size:11.0pt;
    font-family:"Calibri","sans-serif";}
.inlineClass009
    {text-align:justify;line-height:normal}
-->
</style>
</head>
<body>
<p class="MsoNormal inlineClass009">
<span style='font-size:20.0pt'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore 
magna aliqua. Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat. Duis aute irure dolor in reprehenderit in voluptate 
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur 
sint occaecat cupidatat non proident, sunt in culpa qui officia 
deserunt mollit anim id est laborum.</span></p>
</body>
</html>

Answer 1

在两个示例中，元素上有line-height的两个声明。在第一个示例中，line-height:normal属性中的声明style由specificity rules获胜。在第二个示例中，声明line-height:115%获胜，因为选择器p.MsoNormal比特定规则更具体，而不是选择器.inlineClass009。

CSS：在内部应用两个CSS样式内联V时，行高不同

1 个答案: