文章/答案/技术大牛

发布

社区首页 >问答首页 >如何让页面在打印/跨多个浏览器时看起来很好

问如何让页面在打印/跨多个浏览器时看起来很好
EN

Stack Overflow用户

提问于 2012-02-14 14:34:54

回答 2查看 1.5K关注 0票数 3

我刚参加了大约20次实习技术面试，我的大多数面试官都打印了我的简历。我注意到在打印出来的结果中有一些严重的不一致，我认为罪魁祸首是不同的浏览器“渲染”html/css的方式不同。

两个主要问题是(常见的，但不是太大的交易)项目符号大小和(罕见，但很大的交易)我的简历的宽度不适合在一页中，因此一吨的内容被扔到下一行。

我的整个简历有800px宽，有很多要点，几个边框，还有一堆div(其中一些放在左边，这样我就可以有两列东西了)。有没有一个资源记录了在制作跨多个浏览器看起来相同的页面时需要注意的事项？当某人的打印页边距为3英寸时，有没有办法缩放页面，而不是破坏设计？

谢谢!

顺便说一句，这是冗长的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>

html

css

printing

cross-browser

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-02-14 16:34:06

在CSS3 Module: Paged Media中，您可以自己定义margin和其他属性。但是，我建议您将简历转换为PDF格式，并将其放到您的网站上以供离线使用，因为(1)您无法确定收件人的浏览器是否会理解您的样式表，以及(2)收件人的PC上是否安装了'Verdana‘字体。

如果你想在面试官可能使用的所有浏览器上实现相同的行为，那么你必须通过一打的兼容性测试，安装几个浏览器，在不同的操作系统上打印……即使这样，你也不能确定你的收件人使用的浏览器的行为方式不是很奇怪。毕竟，HTML和CSS只是标记/样式语言，而标准只是推荐标准。PDF在所有兼容设备上的外观都相同，并且是ISO标准。我宁愿坚持PDF，而不是使用HTML/CSS的这种你提供的设计。

(额外信息-在像样的浏览器上，您可以使用.entry:nth-of-type(odd)、.entry:nth-of-type(even)实现.odd .even。)

票数 2

Stack Overflow用户

发布于 2012-02-14 16:39:30

项目符号大小异常是由怪癖模式引起的。将DOCTYPE声明放在顶部以触发标准模式，项目符号就可以了。

除了margin:none之外，我在你的源代码中看不到任何错误。

好吧，建议将字体名称视为区分大小写，所以这将是‘宋体’，系统有它的方式。

我不认为在某个地方真的有这样一份全面的推荐清单。也许我应该自己做点什么。

无论如何，请看另一个答案。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/9272709

复制

相似问题

问如何让页面在打印/跨多个浏览器时看起来很好
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何让页面在打印/跨多个浏览器时看起来很好EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何让页面在打印/跨多个浏览器时看起来很好
EN