Question

我抓取了this page的html和css。当我用firefox打开html时，除了包含c ++代码片段的div之外，一切都还可以。

我将jsfiddle中的代码段div与整个css文件（包含您可以在链接标记中找到的所有样式表）一起复制粘贴。

我用firefox打开了html（通过<link rel="stylesheet" type="text/css" href="cpp.css">链接到css文件）并通过firefox检查器检查了css属性：

crayon-line div有line-height: inherit !important
父div为crayon-pre div
crayon-pre div有line-height: 15px !important

那么为什么线高度表现得那样呢？如何解决？

Answer 1

您尝试复制网页的方式不正确。这是可行的代码：）

HTML：

<div id="DIV_1" class="crayon-syntax crayon-theme-familiar-learncppcom crayon-font-monaco crayon-os-pc print-yes notranslate crayon-wrapped" data-settings=" no-popup minimize scroll-mouseover wrap" style="margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important; height: auto;">

  <div class="crayon-plain-wrap" id="DIV_2"></div>
  <div class="crayon-main" style="position: relative; z-index: 1; overflow: hidden;" id="DIV_3">
    <table class="crayon-table" id="TABLE_4">
      <tbody id="TBODY_5">
        <tr class="crayon-row alt" id="TR_6">
          <td class="crayon-nums " data-settings="show" id="TD_7">
            <div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;" id="DIV_8">
              <div class="crayon-num" data-line="crayon-56a64bff76c17359078774-1" style="height: 15px;" id="DIV_9">1</div>
              <div class="crayon-num crayon-striped-num" data-line="crayon-56a64bff76c17359078774-2" style="height: 15px;" id="DIV_10">2</div>
              <div class="crayon-num" data-line="crayon-56a64bff76c17359078774-3" style="height: 15px;" id="DIV_11">3</div>
              <div class="crayon-num crayon-striped-num" data-line="crayon-56a64bff76c17359078774-4" style="height: 15px;" id="DIV_12">4</div>
              <div class="crayon-num" data-line="crayon-56a64bff76c17359078774-5" style="height: 15px;" id="DIV_13">5</div>
              <div class="crayon-num crayon-striped-num" data-line="crayon-56a64bff76c17359078774-6" style="height: 15px;" id="DIV_14">6</div>
              <div class="crayon-num" data-line="crayon-56a64bff76c17359078774-7" style="height: 15px;" id="DIV_15">7</div>
            </div>
          </td>
          <td class="crayon-code" id="TD_16">
            <div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;" id="DIV_17">
              <div class="crayon-line" id="DIV_18"><span class="crayon-p" id="SPAN_19">#include &lt;iostream&gt;</span></div>
              <div class="crayon-line crayon-striped-line" id="DIV_20">&nbsp;</div>
              <div class="crayon-line" id="DIV_21"><span class="crayon-t" id="SPAN_22">int</span><span class="crayon-h" id="SPAN_23"> </span><span class="crayon-e" id="SPAN_24">main</span><span class="crayon-sy" id="SPAN_25">(</span><span class="crayon-sy" id="SPAN_26">)</span></div>
              <div
              class="crayon-line crayon-striped-line" id="DIV_27"><span class="crayon-sy" id="SPAN_28">{</span></div>
            <div class="crayon-line" id="DIV_29"><span class="crayon-h" id="SPAN_30">   </span><span class="crayon-v" id="SPAN_31">std</span><span class="crayon-o" id="SPAN_32">::</span><span class="crayon-r" id="SPAN_33">cout</span><span class="crayon-h" id="SPAN_34"> </span><span class="crayon-o"
              id="SPAN_35">&lt;&lt;</span><span class="crayon-h" id="SPAN_36"> </span><span class="crayon-s" id="SPAN_37">"Hello world!"</span><span class="crayon-h" id="SPAN_38"> </span><span class="crayon-o" id="SPAN_39">&lt;&lt;</span><span class="crayon-h"
              id="SPAN_40"> </span><span class="crayon-v" id="SPAN_41">std</span><span class="crayon-o" id="SPAN_42">::</span><span class="crayon-v" id="SPAN_43">endl</span><span class="crayon-sy" id="SPAN_44">;</span></div>
            <div class="crayon-line crayon-striped-line"
            id="DIV_45"><span class="crayon-h" id="SPAN_46">    </span><span class="crayon-st" id="SPAN_47">return</span><span class="crayon-h" id="SPAN_48"> </span><span class="crayon-cn" id="SPAN_49">0</span><span class="crayon-sy" id="SPAN_50">;</span></div>
            <div
            class="crayon-line" id="DIV_51"><span class="crayon-sy" id="SPAN_52">}</span></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>

Fiddle!

希望我能帮到你。

干杯，

聚苯乙烯。 CSS很长时间都包含在帖子中

line-height没有正确继承

1 个答案: