我刚刚接受了20次实习的技术面试，我的大部分面试官都打印了我的简历。我已经注意到它在印刷形式中的结果存在严重的不一致之处，而且我认为罪魁祸首是不同浏览器和＃34;渲染的差异。 HTML / CSS。
两个主要问题是（共同的，并不是太大的交易）子弹点大小和我的简历（罕见，但很大的）宽度不适合一页，所以一大堆的东西被扔进了下一行。
我的整个简历是800px宽，有许多项目符号，一些边框和一堆div（其中一些是浮动的，所以我可以有两列东西）。是否有资源记录了在制作需要在多个浏览器中看起来相同的页面时需要注意的事项？当有人的打印边距是3英寸而不是破坏设计的替代方法时，有没有办法缩放页面？
谢谢！
BTW，这里有冗长的html / css来源（我不希望你在这里通过它，但更有可能将它复制粘贴到记事本中并自己打开页面。）
编辑：或查看jsfiddle page
<html>
<head>
<title>Andrew Rasmussen</title>
<style type="text/css" media="all">
* {margin:0;padding:0;color:#000;font-size:1em}
body {font:11px Verdana;line-height:13px}
h2 {margin:0.8em 0 0.2em;text-transform:uppercase;font:bold 1.4em verdana;border-bottom:dotted 1px #777}
h4 {display:inline;padding-right:4px}
p, ul {margin-bottom:1.4em}
ul {margin-left:1.2em;padding-left:1.2em;margin-bottom:0}
li {margin-bottom: .2em}
#experience h3 {font-weight:normal}
#title {text-align:center}
#title p {margin:0}
#title h1 {font:normal 1.8em verdana}
#skills {clear:both}
#skills p {display:inline;margin:none}
#other h3, #other p {display:inline}
#wrapper {width:800px}
.entry {float:left;height:140px;border-bottom:1px dotted black}
.odd {border-right:1px dotted black;width:394px;padding-right:5px}
.even {width:390px;padding-left:10px}
.five {height:125px;border-bottom:none}
.six {height:125px;border-bottom:none}
.for {font:bold 1em verdana;position:relative}
.for span {font-style:oblique;font:normal 1em verdana;position:absolute;right:0;top:0}
</style>
<style type="text/css" media="screen">
body {padding:2em}
</style>
</head>
<body>
<div id="wrapper">
<div id="masthead">
<div id="title"><h1>Andrew Rasmussen</h1><p>3A Software Engineering - University of Waterloo</p><p>arasmussen [at] katworks.com</p></div>
</div>
<div id="skills" class="section">
<h2>Technical Skills</h2>
<ul>
<li>Eight years of programming experience
<ul>
<li><h4>C/C++ (8 years)</h4>- 3D games (OpenGL), industry experience with pointers, STL, OOP, templates</li>
<li><h4>PHP, MySQL (2 years)</h4>- Backend of web applications with thousands of rows in the database</li>
<li><h4>OpenGL/GLSL (1 year)</h4>- Modern OpenGL using vertex buffer objects, fragment/vertex shaders</li>
<li><h4>C# (8 months)</h4>- Windows Forms GUI applications, backend of ASP.NET web applications</li>
<li><h4>JavaScript, jQuery (6 months)</h4>- Interactive web plugins</li>
<li><h4>Python (6 months)</h4>- 2D games using PyGame (Astroids and Breakout clones)</li>
</ul></li>
<li>Familiarity: XML, JSON, Regex, HTML, CSS, Scheme, ASP.NET, Perl, Lua, Bash</li>
<li>Platforms: Linux (Ubuntu, Red Hat, Fedora), Windows</li>
<li>Editors: Vim, Visual Studio 2008/2010, Eclipse</li>
</ul></div>
<div id="experience" class="section"><h2>Relevant Work Experience</h2>
<div class="entry odd">
<div class="for">Digital Extremes: London, ON<span>September-December, 2011</span></div>
<h3>Star Trek Gameplay Programming</h3>
<div class="details">
<ul>
<li>Independently designed, implemented, and tested many new features and bug fixes</li>
<li>Touched a broad spectrum of codebase from low-level network serialization in the engine to high-level visible gameplay features</li>
<li>Technologies: C++, Lua</li>
</ul>
</div>
</div>
<div class="entry even">
<div class="for">Morgan Stanley: New York, NY<span>January-April, 2011</span></div>
<h3>Electronic Trading Infrastructure</h3>
<div class="details">
<ul>
<li>Enhanced and fixed a C++ project which serializes C++ objects into specific formats</li>
<li>Project was distributed for use in internal trading applications in production</li>
<li>Solely responsible for the design and testing of my enhancements and bug fixes</li>
<li>Technologies: C++, Bash, Perl, Python, JSON</li>
</ul>
</div>
</div>
<div class="entry odd">
<div class="for">Qualcomm Incorporated: San Diego, CA<span>May-August, 2010</span></div>
<h3>QDSP6 Audio Test Framework</h3>
<div class="details">
<ul>
<li>Designed and developed a Perl script to automate audio testing with extensive capabilities, including running overnight stress tests, recording audio playback, and comparing audio output using bit exactness</li>
<li>Ran stability and stress tests for bi-weekly builds</li>
<li>Assisted our development team in developing these C++ tests</li>
<li>Technologies: Perl, C++, Bash</li>
</ul>
</div>
</div>
<div class="entry even">
<div class="for">Microsoft Corporation: Redmond, WA<span>June-August, 2009</span></div>
<h3>Visual Studio 2010 Globalization</h3>
<div class="details">
<ul>
<li>Developed and tested a web-based Silverlight application that could be localized for multiple locales as a presentation piece to help explain the process of Globalization</li>
<li>Pseudo-localized a daily build of Visual Studio 2010 for familiarity with the globalization process</li>
<li>Technologies: ASP.NET, Silverlight, C#, HTML, CSS</li>
</ul>
</div>
</div>
<div class="entry odd five">
<div class="for">Microsoft Corporation: Redmond, WA<span>June-August, 2008</span></div>
<h3>Windows Embedded, Point of Service</h3>
<div class="details">
<ul>
<li>Developed an application that kept an inventory of POS devices and associated information</li>
<li>Designed a neat, systematic, GUI that could be accessed throughout the entire team (over network)</li>
<li>Technologies: C#, Windows Forms, SQL, ADO.NET</li>
</ul>
</div>
</div>
<div class="entry even six">
<div class="for">Freelance Work</div>
<div class="details">
<ul>
<li>Real Estate Listing - currently developing an interactive real estate site (PHP, jQuery, MySQL) - for Tungsten Property</li>
<li>Content Slider - a jQuery plugin that slides between any generic unordered list of div's you give it - for Katworks Inc.</li>
<li>Xliff Target Editor - a C# WinForms application to edit XML-like files with a GUI - for Katworks Inc.</li>
<li>Directory Remover - an easily configurable DOS Batch script to schedule the removal of certain directories - for Global Labs</li>
</ul>
</div>
</div>
</div>
<div id="other">
<div id="activities" class="section"><h2>Related Activities</h2>
<ul>
<li><h3>Game/Graphics Programming:</h3>
<ul>
<li>3D games (C++, modern OpenGL) using vertex buffer objects and shaders (GLSL)</li>
<li>Rendered ~3 million textured triangles using VBOs with >300fps in a minecraft-like game (including physics)</li>
<li>Designed and implemented a game using a heightmap and associated collision detection</li>
</ul>
</li>
<li><h3>Web Programming:</h3>
<ul>
<li>Interactive web plugins using vanilla JavaScript or jQuery</li>
<li>Applications with a PHP/MySQL backend and careful, secure, graphical interface to the database</li>
</ul>
</li>
<li><h3>Stack Overflow: </h3>Over 130 answers, have a reputation in the top 12% of users; mostly from answering C++/OpenGL questions</li>
<li><h3>Project Euler: </h3>Completion of the dozens of challenges on this programming challenge/contest site for fun</li>
<li><h3>UW/Google AI Challenge: </h3>Participation in two Google sponsored, UW hosted, AI programming competitions. Overall ranking in both challenges were in the top quartile. Competition subjects include Rock Paper Scissors and Tron.</li>
</ul>
</div>
<div id="education" class="section"><h2>Education</h2>
<ul>
<li><h3>Candidate for Bachelor of Software Engineering </h3>at the University of Waterloo, June 2014. Relevant courses include Operating Systems, Algorithms, Object Oriented Software Development, Data Structures</li></ul></div>
</div>
</div>
</body>
</html>
答案 0 :(得分：2)
有CSS3 Module: Paged Media，您可以自己定义margin和其他属性。但是，我建议您将简历转换为PDF并将其放在您的网站上以供离线使用，因为（1）您无法确定收件人的浏览器是否理解您的样式表以及（2）字体是否为'Verdana'已安装在收件人PC上。
如果您希望在面试官可以使用的所有浏览器上实现相同的行为，那么您将需要完成十几项兼容性测试，安装多个浏览器，在不同的操作系统上打印...即使这样，您也无法确定收件人是否使用了以奇怪方式运行的浏览器。毕竟，HTML和CSS只有标记/样式语言，而标准只是推荐。确定PDF在所有兼容设备上看起来相同，并且是ISO标准。我宁愿坚持使用PDF，也不愿使用HTML / CSS来实现这种设计。
（额外信息 - 关于体面的浏览器，您可以使用.odd，.even实现.entry:nth-of-type(odd) .entry:nth-of-type(even)。）
答案 1 :(得分：2)
子弹点大小异常是由怪癖模式引起的。将DOCTYPE声明放在顶部以触发标准模式，子弹就可以了。
除了margin:none之外，我还没有发现你的来源有任何错误
好吧，建议将字体名称视为区分大小写，因此系统会使用Verdana＆＃39; Verdana＆＃39;
我不认为那里的某些推荐确实是一份全面的清单。也许我应该自己提出一些东西。
无论如何，请看另一个答案。