【发布时间】：2019-11-06 21:55:09
【问题描述】：
尝试从 html 页面生成带有 jsPDF 的 pdf，我成功了，但由于某种原因，我的样式没有应用于 Firefox，我开始查看正在生成的 html，当我打开时看到了本地的 HTML 由于某种原因没有应用样式，这应该很简单所有样式都在样式标签中，我没有导入文件但还不行。这是 HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>FF Testing</title>
<style>
html {
box-sizing: border-box !important;
}
.page_added {
border: 0 none !important;
}
.body_sub {
font-size: 1rem !important;
font-family: Aria, sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
background-color: #fff !important;
margin: 0 !important;
padding: 1rem !important;
box-sizing: border-box !important;
}
table {
width: 100% !important;
/*margin-bottom: 1rem;*/
background-color: transparent !important;
/*border-collapse: separate !important;*/
/*border-spacing: 0 !important;*/
padding: 0 !important;
margin: 0 !important;
}
tr {
padding-bottom: 0;
padding-top: 0;
margin-bottom: 0;
margin-top: 0;
border-spacing: 0;
border: 1px solid #dee2e6;
background-color: transparent;
/*border-collapse: collapse;*/
}
.title {
border: 0 none !important;
}
.table td {
padding: 8px;
vertical-align: top;
}
.table td.or {
font-weight: bold;
color: blue;
background: #dee2e6;
text-align: center;
font-size: 1.5rem;
}
.and {
font-weight: bold;
color: blue;
}
.table td.origin {
font-weight: bold;
color: black;
text-align: center;
font-size: 1.5rem;
/*break-before: avoid;*/
}
.diseeaseTitle {
font-weight: bold;
font-size: 1.5rem;
padding-bottom: 8px;
}
</style>
</head>
<body>
<div class="body_sub">
<table class="table">
<tr class="title">
<td colspan="3">
<h2>NBA5387430702 <br /></h2>
</td>
</tr>
<tr class="title">
<td colspan="3">
<small
>Subtitle here Subtitle here Subtitle here Subtitle here Subtitle here Subtitle here Subtitle here</small
>
</td>
</tr>
<tr class="title">
<td colspan="3">
<h3 class="diseeaseTitle">
<strong>TITLE TITLE TITLE TITLE TITLE </strong>
</h3>
</td>
</tr>
<tr>
<td colspan="3" class="origin"> Smaller title Smaller title Smaller title</td>
</tr>
<tr>
<td colspan="1" style="width: 40%;">question number one?</td>
<td colspan="1">
Year
</td>
<td colspan="1"></td>
</tr>
<tr>
<td colspan="1" style="width: 40%;">
questions number two which is slightly longer not as short as question one?
</td>
<td colspan="1">
Single Choice
</td>
<td colspan="1">
<span>
Some answer option; </span
><span>
No; </span
><span>
Not sure; </span
><span>
Another answer option (AAO);
</span>
</td>
</tr>
<tr>
<td colspan="1" style="width: 40%;">
This is also a question since this is a questionnaire so I need many questions, ok?
</td>
<td colspan="1">
Single Choice
</td>
<td colspan="1">
<span>
Below 30 percent; </span
><span>
30-39 percent; </span
><span>
40-49 percent; </span
><span>
50-59 percent; </span
><span>
60-69 percent; </span
><span>
70-90 percent; </span
><span>
80 percent of greater; </span
><span>
Not sure; </span
><span>
Last Option
</span>
</td>
</tr>
<tr>
<td colspan="1" style="width: 40%;">
Are you currently reading this questionnaire right now, crazy stuff huh?
</td>
<td colspan="1">
Multiple Choice
</td>
<td colspan="1">
<span>
Answer 3534; </span
><span>
Some other answer; </span
><span>
Bla bLa bal; </span
><span>
Zebras giraffes and thingamiaggers; </span
><span>
ghslhgslikh; </span
><span>
skljgslkn; </span
><span>
xngbxklbgl; </span
><span>
svgmsmn; </span
><span>
hsxshfshsd; </span
><span>
xhdxhsdh; </span
><span>
Not sure; </span
><span>
Not taking this anymore
</span>
</td>
</tr>
<tr>
<td colspan="1" style="width: 40%;">
Do you have any of the following something something ? Please select all that apply.
</td>
<td colspan="1">
Multiple Choice
</td>
<td colspan="1">
<span>
this that or possibly those things; </span
><span>
Active boromoter (chronic or acute); </span
><span>
Active craziness requires treatment; </span
><span>
Chronic eating of burgers; </span
><span>
Serious addicition to football; </span
><span>
No significant conditions
</span>
</td>
</tr>
</table>
<!---->
<table class="table">
<!---->
</table>
<p style="break-before: page;">
</p>
<table class="table">
<tr>
<td colspan="3" class="origin">
Match Criteria for this questionnaire
</td>
</tr>
<tr>
<td style="width: 40%;">What year were you born?</td>
<td>is greater than (years)</td>
<td></td>
<td><!----></td>
</tr>
<!---->
</table>
<p style="break-before: page;"> </p>
</div>
</body>
</html>
看起来很糟糕的一些问题是tr 元素中的边框没有显示，但更普遍的是，似乎至少大多数样式都没有被应用。我错过了什么我的样式没有被应用？
【问题讨论】：