Question

我在宽度受限的div中包含的dl周围有边距问题。屏幕媒体可预测地呈现dl边距，但是在打印时，dl边距被忽略，超出预期边界到自然页边距。我想知道我的CSS或HTML中有一些错误并且可以修复，但代码对我来说似乎正确，并且在Firefox中正常工作 - 只是在Safari和Chrome中没有。代码如下，但由于您必须同时在屏幕和打印中查看，这里有一个现在有用的链接：http://dgc.bikeshed.us/dl.html

[编辑：删除了有问题的尖括号]

<html>
  <head>
  </head>
  <body>

<style>

@media screen {
    #main {
        width: 40em;
        margin: auto;
    }
}

@media print {
    html, body {
        width: 8.5in;
    }
    #main {
        width: 5.5in;
        margin: auto;
    }
}

dl {
    width: 100%;
    margin: 0;
}

dt, dd {
    padding: 0;
    margin: 0;
}

dt {
    width: 20%;
    float: left;
}

dd {
    width: 80%;
    float: left;
}

div#main {
    border: 1px solid #f88;
}
</style>

    <h1>DL test</h1>
    <div id="main">
      <p>
This minimal page illustrates what appears to be a WebKit bug with <code>dl</code> styling for printed media.
      </p>
      <p>
We set differing page width and margin for <code>@media screen</code> and <code>@media print</code>, and show a paragraph of text (this intro) to highlight where the margins should lie. Then we create a typical floated definition list, to align the <code>dl</code> in a two-column layout.  It should look predictable in all browsers, with the margins of the <code>dl</code> below aligned with this paragraph.  The whole is bounded by a red box, again to highlight the correct margin.
      </p>
      <dl>
        <dt>lorem</dt>
        <dd>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget ipsum nec turpis viverra ornare. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In malesuada turpis eu tempus blandit. Donec varius est vitae orci maximus, in faucibus odio fringilla. Pellentesque fermentum accumsan ullamcorper. Nulla dictum sem non lorem tempor, eget interdum augue tempus. Proin quis sapien euismod, luctus augue non, ullamcorper urna. Integer dignissim imperdiet fringilla. Aenean sit amet mattis orci. Cras nec velit rutrum mi aliquam cursus a id velit. Morbi gravida risus molestie orci lacinia pretium. Nulla eleifend quis lacus sit amet tristique.
        </dd>
      </dl>
      <p>
<b>Now print the page, and look at the PDF preview.</b>  The <code>dl</code> (the <code>dd</code>) exceeds the right margin, bumping against the natural page margin.  What's more, if we style the <code>@media print</code> <code>dl</code> separately, that style is ignored.  And if we style the <code>dl</code> in <code>@media screen</code>, that style applies to the printed media as well, and cannot be overridden by <code>@media print</code>.  I see this in both Chrome and Safari on Mac OS X 10.8.5, but not in Firefox.  The problem seems to be in applying width; the screen vs. print layout is distinctly different with or without the floats.  It's as if the <code>dl</code>'s <code>width</code> property is applied to the page width in print media, instead of to the container width.
      </p>
    </div>

  </body>
</html>

dl利润在@media print中不受webkit的尊重？

0 个答案: