0

次の問題があります: HTML タグからスタイルを抽出してヘッダーに配置するツールを開発しました (つまり、インライン CSS を内部にします)。ただし、複数の CSS クラスがある場合、 line-height のレンダリングが異なるようです。

これはツール抽出前のサンプルです: 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>

そして、これはツール抽出後のサンプルです: 2 つの内部 CSS クラスの呼び出し -> line-height のレンダリングが異なります!

<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>

4

1 に答える 1

1

どちらのサンプルでもline-height、要素に対して 2 つの宣言があります。line-height:normal最初のサンプルでは、style​​属性の宣言が詳細性ルールによって優先されます。2 番目のサンプルでは、​​詳細性ルールにより、セレクターがセレクターよりも具体的であるline-height:115%ため、宣言が優先されます。p.MsoNormal.inlineClass009

于 2012-12-27T11:09:09.780 に答える