0

我正在做一个项目，我将 html 发送给 PDF 创建者，所以我不太担心正确的 html，只要它正确显示在 PDF 上即可。

我目前正在处理一个 PDF，其中大约一半页面的字体大小与另一个不同。我希望通过在选择周围放置标签来轻松完成此操作。但是，有些表格和列表没有继承 css 样式。

例如：

CSS：

.fs8
{
    font-size:8pt;
}

HTML：

...
<p>Size 10 text here...</p>

<span class='fs8'>

<p>This text is size 8</p>

<table>
    <tr>
        <td>This text is NOT size 8</td>
    </tr>
</table>

<p>Still size 8...</p>

<ul>
    <li>NOT size 8!
</ul>

</span>

<p>Size 10 again...</p>

有什么好的方法可以跨越表格和列表，所以我不必在数百个地方添加类标签？

4

6 回答 6

4

不确定我是否明白你的意思，但据我所知，你想改进你的选择器。

尝试这个：

.fs8 td,
.fs8 li
{
    font-size:9pt;
}

这会将 font-size 设置为 9pt 在任何td或li带有 class 的元素内的标签中fs8。

于 2012-10-17T19:25:11.933 回答
2

您应该使用 div 而不是 span，因为 span 默认情况下是内联元素，这意味着它不应包含块级元素，例如 table 或 ul。现在为 CSS。

.fs8 {
  font-size: 8px;
}
.fs8 table,
.fs8 ul {
  font-size: 10px; /* not 8px */
}

这应该够了吧。除了包装div之外，您不需要向任何项目添加类，记住它不能是跨度，因此将其替换为 div 以获得正确的行为。

于 2012-10-17T20:16:47.520 回答
1

在元素周围使用span标签table只是无效的标记，所以所有的赌注都没有了。考虑div改用或直接将所需的 CSS 属性分配给适用的元素。

于 2012-10-17T19:31:41.420 回答
1

由于您想要一个快速且可能很脏的解决方案，您可以使用通配符选择器

.fs8, .fs8 *, .fs8 * *, .fs * * * { font-size:8pt; }

（您需要所有 3 个表格（跨度 > 表格 > tr > td）

虽然，请注意可能会有不良副作用！

此外，您应该小心用于生成 PDF 的工具，有些工具使用旧的浏览器渲染引擎（hello ie6 渲染）生成文件。实际上，这可能就是您遇到问题的原因，因为此示例在 ie8 上完美运行，但在 quirk 模式下却不行。

于 2012-10-17T20:08:41.470 回答
1

我知道你不想做类标签，但你不必把它放在所有标签上。您可以在整个事物周围放置一个 div，而不是可以被外部设置覆盖的 span 标签。我以前遇到过这个问题，所以做这样的事情：

    <div id="my_settings">

     <table>.....
     </table>

     <ul>....
     </ul>


     </div>

然后在你的CSS中这样做：

     #my_settings li, #my_settings li, #my_settings p{
         font-siz: ....;
     }

我不完全确定这是否是您想要的，但它可能比为所有这些都添加一个类更容易。

于 2012-10-17T20:05:57.457 回答
0

我不确定您的问题，但我会尝试回答：

p { font-size:10px; }
.fs8 p { font-size:8px; }

或者

p, td, li { font-size: 10px; }
span.fs8 p { font-size:8px; }
于 2012-10-17T19:30:14.043 回答