个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在用 HTML 创建发票示例。并在打印同一张发票后。
使用 FireFox 打印时发票打印正常但是，当尝试使用 Chrome 和 Safari 进行打印时，发票页脚会丢失其 CSS 设置。
如果打印的页面不止一页，我需要在最后一页的底部添加页脚。
HTML :
<!DOCTYPE html>
<html class=""><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8"><meta name="robots" content="noindex">
<link rel="canonical" href="http://codepen.io/chriscoyier/pen/uwJjr">
<style class="cp-pen-styles">
/* Mostly: http://ryanfait.com/sticky-footer/ */
* {
margin: 0;
}
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 142px;
}
.site-footer {
background: orange;
}</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="page-wrap">
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1> Header </h1>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>
<h4>Service</h4>
</th>
<th>
<h4>Description</h4>
</th>
<th>
<h4>Hrs/Qty</h4>
</th>
<th>
<h4>Rate/Price</h4>
</th>
<th>
<h4>Sub Total</h4>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Article</td>
<td><a href="#">Title of your article here</a></td>
<td class="text-right">-</td>
<td class="text-right">$200.00</td>
<td class="text-right">$200.00</td>
</tr> <tr>
<td>Article</td>
<td><a href="#">Title of your article here</a></td>
<td class="text-right">-</td>
<td class="text-right">$200.00</td>
<td class="text-right">$200.00</td>
</tr> <tr>
<td>Article</td>
<td><a href="#">Title of your article here</a></td>
<td class="text-right">-</td>
<td class="text-right">$200.00</td>
<td class="text-right">$200.00</td>
</tr> <tr>
<td>Article</td>
<td><a href="#">Title of your article here</a></td>
<td class="text-right">-</td>
<td class="text-right">$200.00</td>
<td class="text-right">$200.00</td>
</tr> <tr>
<td>Article</td>
<td><a href="#">Title of your article here</a></td>
<td class="text-right">-</td>
<td class="text-right">$200.00</td>
<td class="text-right">$200.00</td>
</tr> <tr>
<td>Article</td>
<td><a href="#">Title of your article here</a></td>
<td class="text-right">-</td>
<td class="text-right">$200.00</td>
<td class="text-right">$200.00</td>
</tr> <tr>
<td>Article</td>
<td><a href="#">Title of your article here</a></td>
<td class="text-right">-</td>
<td class="text-right">$200.00</td>
<td class="text-right">$200.00</td>
</tr> <tr>
<td>Article</td>
<td><a href="#">Title of your article here</a></td>
<td class="text-right">-</td>
<td class="text-right">$200.00</td>
<td class="text-right">$200.00</td>
</tr> <tr>
<td>Article</td>
<td><a href="#">Title of your article here</a></td>
<td class="text-right">-</td>
<td class="text-right">$200.00</td>
<td class="text-right">$200.00</td>
</tr> <tr>
<td>Article</td>
<td><a href="#">Title of your article here</a></td>
<td class="text-right">-</td>
<td class="text-right">$200.00</td>
<td class="text-right">$200.00</td>
</tr> <tr>
<td>Article</td>
<td><a href="#">Title of your article here</a></td>
<td class="text-right">-</td>
<td class="text-right">$200.00</td>
<td class="text-right">$200.00</td>
</tr> <tr>
<td>Article</td>
<td><a href="#">Title of your article here</a></td>
<td class="text-right">-</td>
<td class="text-right">$200.00</td>
<td class="text-right">$200.00</td>
</tr> <tr>
<td>Article</td>
<td><a href="#">Title of your article here</a></td>
<td class="text-right">-</td>
<td class="text-right">$200.00</td>
<td class="text-right">$200.00</td>
</tr> <tr>
<td>Article</td>
<td><a href="#">Title of your article here</a></td>
<td class="text-right">-</td>
<td class="text-right">$200.00</td>
<td class="text-right">$200.00</td>
</tr> <tr>
<td>Article</td>
<td><a href="#">Title of your article here</a></td>
<td class="text-right">-</td>
<td class="text-right">$200.00</td>
<td class="text-right">$200.00</td>
</tr> <tr>
<td>Article</td>
<td><a href="#">Title of your article here</a></td>
<td class="text-right">-</td>
<td class="text-right">$200.00</td>
<td class="text-right">$200.00</td>
</tr> <tr>
<td>Article</td>
<td><a href="#">Title of your article here</a></td>
<td class="text-right">-</td>
<td class="text-right">$200.00</td>
<td class="text-right">$200.00</td>
</tr> <tr>
<td>Article</td>
<td><a href="#">Title of your article here</a></td>
<td class="text-right">-</td>
<td class="text-right">$200.00</td>
<td class="text-right">$200.00</td>
</tr> <tr>
<td>Article</td>
<td><a href="#">Title of your article here</a></td>
<td class="text-right">-</td>
<td class="text-right">$200.00</td>
<td class="text-right">$200.00</td>
</tr> <tr>
<td>Article</td>
<td><a href="#">Title of your article here</a></td>
<td class="text-right">-</td>
<td class="text-right">$200.00</td>
<td class="text-right">$200.00</td>
</tr> <tr>
<td>Article</td>
<td><a href="#">Title of your article here</a></td>
<td class="text-right">-</td>
<td class="text-right">$200.00</td>
<td class="text-right">$200.00</td>
</tr> <tr>
<td>Article</td>
<td><a href="#">Title of your article here</a></td>
<td class="text-right">-</td>
<td class="text-right">$200.00</td>
<td class="text-right">$200.00</td>
</tr> <tr>
<td>Article</td>
<td><a href="#">Title of your article here</a></td>
<td class="text-right">-</td>
<td class="text-right">$200.00</td>
<td class="text-right">$200.00</td>
</tr> <tr>
<td>Article</td>
<td><a href="#">Title of your article here</a></td>
<td class="text-right">-</td>
<td class="text-right">$200.00</td>
<td class="text-right">$200.00</td>
</tr> <tr>
<td>Article</td>
<td><a href="#">Title of your article here</a></td>
<td class="text-right">-</td>
<td class="text-right">$200.00</td>
<td class="text-right">$200.00</td>
</tr> <tr>
<td>Article</td>
<td><a href="#">Title of your article here</a></td>
<td class="text-right">-</td>
<td class="text-right">$200.00</td>
<td class="text-right">$200.00</td>
</tr> <tr>
<td>Article</td>
<td><a href="#">Title of your article here</a></td>
<td class="text-right">-</td>
<td class="text-right">$200.00</td>
<td class="text-right">$200.00</td>
</tr> <tr>
<td>Article</td>
<td><a href="#">Title of your article here</a></td>
<td class="text-right">-</td>
<td class="text-right">$200.00</td>
<td class="text-right">$200.00</td>
</tr> <tr>
<td>Article</td>
<td><a href="#">Title of your article here</a></td>
<td class="text-right">-</td>
<td class="text-right">$200.00</td>
<td class="text-right">$200.00</td>
</tr> <tr>
<td>Article</td>
<td><a href="#">Title of your article here</a></td>
<td class="text-right">-</td>
<td class="text-right">$200.00</td>
<td class="text-right">$200.00</td>
</tr> <tr>
<td>Article</td>
<td><a href="#">Title of your article here</a></td>
<td class="text-right">-</td>
<td class="text-right">$200.00</td>
<td class="text-right">$200.00</td>
</tr> <tr>
<td>Article</td>
<td><a href="#">Title of your article here</a></td>
<td class="text-right">-</td>
<td class="text-right">$200.00</td>
<td class="text-right">$200.00</td>
</tr> <tr>
<td>Article</td>
<td><a href="#">Title of your article here</a></td>
<td class="text-right">-</td>
<td class="text-right">$200.00</td>
<td class="text-right">$200.00</td>
</tr>
<tr>
<td>Template Design</td>
<td><a href="#">Details of project here</a></td>
<td class="text-right">10</td>
<td class="text-right">75.00</td>
<td class="text-right">$750.00</td>
</tr>
<tr>
<td>Development</td>
<td><a href="#">WordPress Blogging theme</a></td>
<td class="text-right">5</td>
<td class="text-right">50.00</td>
<td class="text-right">$250.00</td>
</tr>
<tr>
<td>Development</td>
<td><a href="#">WordPress Blogging theme</a></td>
<td class="text-right">5</td>
<td class="text-right">50.00</td>
<td class="text-right">$250.00</td>
</tr>
<tr>
<td>Development</td>
<td><a href="#">WordPress Blogging theme</a></td>
<td class="text-right">5</td>
<td class="text-right">50.00</td>
<td class="text-right">$250.00</td>
</tr>
<tr>
<td>Development</td>
<td><a href="#">WordPress Blogging theme</a></td>
<td class="text-right">5</td>
<td class="text-right">50.00</td>
<td class="text-right">$250.00</td>
</tr>
<tr>
<td>Development</td>
<td><a href="#">WordPress Blogging theme</a></td>
<td class="text-right">5</td>
<td class="text-right">50.00</td>
<td class="text-right">$250.00</td>
</tr>
<tr>
<td>Development</td>
<td><a href="#">WordPress Blogging theme</a></td>
<td class="text-right">5</td>
<td class="text-right">50.00</td>
<td class="text-right">$250.00</td>
</tr>
<tr>
<td>Development</td>
<td><a href="#">WordPress Blogging theme</a></td>
<td class="text-right">5</td>
<td class="text-right">50.00</td>
<td class="text-right">$250.00</td>
</tr>
<tr>
<td>Development</td>
<td><a href="#">WordPress Blogging theme</a></td>
<td class="text-right">5</td>
<td class="text-right">50.00</td>
<td class="text-right">$250.00</td>
</tr>
<tr>
<td>Development</td>
<td><a href="#">WordPress Blogging theme</a></td>
<td class="text-right">5</td>
<td class="text-right">50.00</td>
<td class="text-right">$250.00</td>
</tr>
<tr>
<td>Development</td>
<td><a href="#">WordPress Blogging theme</a></td>
<td class="text-right">5</td>
<td class="text-right">50.00</td>
<td class="text-right">$250.00</td>
</tr>
<tr>
<td>Development</td>
<td><a href="#">WordPress Blogging theme</a></td>
<td class="text-right">5</td>
<td class="text-right">50.00</td>
<td class="text-right">$250.00</td>
</tr>
<tr>
<td>Development</td>
<td><a href="#">WordPress Blogging theme</a></td>
<td class="text-right">5</td>
<td class="text-right">50.00</td>
<td class="text-right">$250.00</td>
</tr>
<tr>
<td>Development</td>
<td><a href="#">WordPress Blogging theme</a></td>
<td class="text-right">5</td>
<td class="text-right">50.00</td>
<td class="text-right">$250.00</td>
</tr>
<tr>
<td>Development</td>
<td><a href="#">WordPress Blogging theme</a></td>
<td class="text-right">5</td>
<td class="text-right">50.00</td>
<td class="text-right">$250.00</td>
</tr>
<tr>
<td>Development</td>
<td><a href="#">WordPress Blogging theme</a></td>
<td class="text-right">5</td>
<td class="text-right">50.00</td>
<td class="text-right">$250.00</td>
</tr>
<tr>
<td>Development</td>
<td><a href="#">WordPress Blogging theme</a></td>
<td class="text-right">5</td>
<td class="text-right">50.00</td>
<td class="text-right">$250.00</td>
</tr>
<tr>
<td>Development</td>
<td><a href="#">WordPress Blogging theme</a></td>
<td class="text-right">5</td>
<td class="text-right">50.00</td>
<td class="text-right">$250.00</td>
</tr>
<tr>
<td>Development</td>
<td><a href="#">WordPress Blogging theme</a></td>
<td class="text-right">5</td>
<td class="text-right">50.00</td>
<td class="text-right">$250.00</td>
</tr>
<tr>
<td>Development</td>
<td><a href="#">WordPress Blogging theme</a></td>
<td class="text-right">5</td>
<td class="text-right">50.00</td>
<td class="text-right">$250.00</td>
</tr>
<tr>
<td>Development</td>
<td><a href="#">WordPress Blogging theme</a></td>
<td class="text-right">5</td>
<td class="text-right">50.00</td>
<td class="text-right">$250.00</td>
</tr>
<tr>
<td>Development</td>
<td><a href="#">WordPress Blogging theme</a></td>
<td class="text-right">5</td>
<td class="text-right">50.00</td>
<td class="text-right">$250.00</td>
</tr>
</tbody>
</table>
</div>
<div id="push"></div>
</div>
</div>
<footer class="site-footer">
I'm the Sticky Footer.
</footer>
</body></html>
打印样本
最佳答案
我已经在我的 Chrome 浏览器上进行了测试，它似乎没问题。我很确定您的问题在于以下 CSS
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
去掉content属性，同时去掉margin-bottom: -142px;从你的页面包装类。这对我来说似乎没问题。
关于javascript - 使用 Chrome 和 Safari 打印时发票页脚 CSS 在打印中丢失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27419470/
25
4
0
Safari 和 Mobile Safari 在组合边框半径、填充和边框时似乎有问题。在 Chrome 和 Firefox 中运行良好。 CSS: img { width: 200px;
每次我在打开 Safari 开发工具的情况下加载页面(无论是哪个选项卡)时，都会触发一些断点，并且我会被重定向到“源代码”选项卡，并显示消息“调试器已暂停”。问题是我没有设置任何断点，至少是有意的，这
我有一个复合 div(它有 translate3d)和一个 opacity过渡: #bad { background-color: red; -webkit-transition: o
我想为我正在制作的工具添加一个类似的功能。我对它在代码方面的工作方式很感兴趣。我希望能够获得一个 html 页面并排除除文章之外的所有内容。 最佳答案 Readability 项目对 chrome 和
我们有一个重定向到另一台服务器的 API 端点。它是通过 XHR 调用的，似乎在大多数浏览器中都能正常工作，除了 Safari(特别是在 iOS 上)。 我在控制台中遇到的错误是:跨源重定向被跨源资源
如何在 Safari 中为网页添加 IE 等页面转换效果？ 最佳答案 你可以看看这个例子:http://sachiniscool.blogspot.com/2006/01/implementing-p
所以我用拇指和周围的白色边框制作了这个圆圈。一切都在每个浏览器中都能找到，除了 safari，它不会按应有的方式呈现白色边框。那我怎样才能让它工作呢？ 示例 http://jsfiddle.net/v
我找遍了这个问题的解决方案，但似乎没有任何效果，如果可以避免的话，我真的不想使用 hack。 当我将 line-height 设置为垂直居中时，我的导航栏在任何地方都居中，但在 safari 中，它的
在输入字段中输入时，safari 会创建一个基于下拉列表的联系人。我不知道如何隐藏这个下拉菜单。我可以隐藏联系人按钮。 我正在运行 Safari 版本 11.0.1 重现 fiddle : https
我需要一个苹果脚本来全屏打开 safari 并隐藏小牛上的工具栏。 这听起来很容易，但事实并非如此! 我需要打开 safari，然后以全屏模式打开谷歌，然后隐藏工具栏。 这将是以下示例的等效项，但对于
嗨， friend 们，我开发了一个 safari 扩展并且也能够构建它。 但是当我尝试安装它时，会出现以下错误: “Safari 无法安装此扩展程序。安装此扩展程序时出错” 我有一个有效的 Safa
我想将使用的扩展版本报告给服务。 有没有办法从扩展中读取扩展版本号？ 最佳答案 您可以使用 displayVersion 访问该版本SafariExtension 的属性(property)类(cla
我有一个禁用模式的 Safari 浏览器扩展。我想做的是在用户进入禁用模式时以编程方式更改工具栏图标。 是否有一个 API 可以让我实现这一点，如果有，它是什么？ 最佳答案 您的扩展程序拥有的任何工具
Safari 有一项“功能”，可以在您输入网址时预加载页面。 现在对于大多数用户来说，这确实是一项功能，可以加快页面加载速度。但是对于 Web 开发人员来说，它可能会带来麻烦 - 特别是当它自动加载您
我们有一个正在开发中的 PHP Web 应用程序，它不应该被公众访问(但)，但我们不想实现自定义解决方案来防止这种情况发生，因此我们求助于 HTTP 基本身份验证，它通常工作正常但有是 iPhone
我正在尝试查看 Safari 本地存储中保存的单个值的全部内容(它是一个长 JSON 对象)。当我查看键/值对时，该值对于屏幕来说太长了，复制该行只会复制该值的可见部分。有没有办法看到整条线？ 最佳答
出于开发目的，我需要在我的计算机上的 Safari(Windows 上)中禁用同源策略。 在 Chrome 中，这可以通过使用标志 --disable-web-security 启动来完成。 Safa
我正在开发网站并创建应用程序。我想知道如何通过 safari 等网络浏览器检查元素。 在普通的 Chrome、Firefox、Explorer 或任何其他浏览器中，我们将右键单击鼠标按钮或按功能键 F
我有兴趣针对 Safari 浏览器进行一些开发，但我不确定它是否是开源项目？我知道 webkit 是开源的，但这并不意味着浏览器是开源的。 我已经给苹果发了电子邮件，但他们的回复不是很及时，所以我想知
我有一个正确的/etc/hosts 文件，其中包含以下内容: 127.0.0.1 localhost 255.255.255.255 broadcasthost ::1 l
我是一名优秀的程序员,十分优秀！