Question

我编写了HTML来创建iPad上Safari上图所示的内容。我使用相对，定位，指定像素来定位文本和图像以及整个背景和边框的大小。但是，当这个HTML在Safari for Mac和iPhone上呈现时，图像位置不同，在iPhone上，背景和边框不再封装内容。

关于如何修改HTML以确保至少在Safari for Mac和iOS上呈现正确的任何指针都将非常感谢！

我目前的HTML：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head></head><body><div><p><br /></p></div><div style="border-style:solid;border-width:2px;border-color:rgb(0,0,0);background-color:rgb(255,232,0);width:302px;height:185px"><img style="position:relative;z-index:100;left:126px; top:39px;" src="https://s3.amazonaws.com/signoffmainbucket/8CA8EC1A-C1C5-4390-9FC4-649648AA26C8.jpg" alt="image"/><p style="opacity:1.00;color:rgb(0,0,0);position:relative;margin: -123px 0px 0px 18px;font-family: Helvetica, Helvetica;font-size:14px"><b>John</b></p><br /><br /><br /><br /><p style="opacity:1.00;color:rgb(0,0,0);position:relative;margin: 0px 0px 0px 18px;font-family: Helvetica, Helvetica;font-size:14px"><b>XYZ Company</b></p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div></body></html>

这是由iPad上面的HTML正确呈现的内容：

enter image description here

Answer 1

我的下意识反应是to use SVG.爆炸你的榜样：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<body>
<div>
<p>
<br />
</p>
</div>
<div style="border-style:solid;border-width:2px;border-color:rgb(0,0,0);background-color:rgb(255,232,0);width:302px;height:185px">
<img style="position:relative;z-index:100;left:126px; top:39px;" src="https://s3.amazonaws.com/signoffmainbucket/8CA8EC1A-C1C5-4390-9FC4-649648AA26C8.jpg" alt="image"/>
<p style="opacity:1.00;color:rgb(0,0,0);position:relative;margin: -123px 0px 0px 18px;font-family: Helvetica, Helvetica;font-size:14px">
<b>John
</b>
</p>
<br />
<br />
<br />
<br />
<p style="opacity:1.00;color:rgb(0,0,0);position:relative;margin: 0px 0px 0px 18px;font-family: Helvetica, Helvetica;font-size:14px">
<b>XYZ Company
</b>
</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
</body>
</html>

<强>嗷。不要这样做。我们可以提供帮助。

Doing this properly，我们得到类似的结果：

<?xml version="1.0"?>
<svg width="407" height="263" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <g>
  <title>Layer 1</title>
  <rect id="svg_2" height="262.999995" width="406.999984" y="-0.000003" x="-0.000005" stroke="#000000" fill="#ffff00"/>
  <image fill="#000000" xlink:href="https://s3.amazonaws.com/signoffmainbucket/8CA8EC1A-C1C5-4390-9FC4-649648AA26C8.jpg" id="svg_3" height="170.000002" width="208.999986" y="64.999977" x="186.999985"/>
  <text xml:space="preserve" text-anchor="middle" font-family="serif" font-size="24" id="svg_4" y="41.999977" x="52.999985" stroke-width="0" stroke="#000000" fill="#000000">John</text>
  <text xml:space="preserve" text-anchor="middle" font-family="serif" font-size="24" id="svg_5" y="193.999977" x="97.999985" stroke-width="0" stroke="#000000" fill="#000000">XYZ Company</text>
 </g>
</svg>

如果您的浏览器支持内联Base64编码，您可以将其放入网址行，看看我在那里做了什么（这适用于Chrome）：

data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjQwNyIgaGVpZ2h0PSIyNjMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogPCEtLSBDcmVhdGVkIHdpdGggU1ZHLWVkaXQgLSBodHRwOi8vc3ZnLWVkaXQuZ29vZ2xlY29kZS5jb20vIC0tPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxyZWN0IGlkPSJzdmdfMiIgaGVpZ2h0PSIyNjIuOTk5OTk1IiB3aWR0aD0iNDA2Ljk5OTk4NCIgeT0iLTAuMDAwMDAzIiB4PSItMC4wMDAwMDUiIHN0cm9rZT0iIzAwMDAwMCIgZmlsbD0iI2ZmZmYwMCIvPgogIDxpbWFnZSBmaWxsPSIjMDAwMDAwIiB4bGluazpocmVmPSJodHRwczovL3MzLmFtYXpvbmF3cy5jb20vc2lnbm9mZm1haW5idWNrZXQvOENBOEVDMUEtQzFDNS00MzkwLTlGQzQtNjQ5NjQ4QUEyNkM4LmpwZyIgaWQ9InN2Z18zIiBoZWlnaHQ9IjE3MC4wMDAwMDIiIHdpZHRoPSIyMDguOTk5OTg2IiB5PSI2NC45OTk5NzciIHg9IjE4Ni45OTk5ODUiLz4KICA8dGV4dCB4bWw6c3BhY2U9InByZXNlcnZlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LWZhbWlseT0ic2VyaWYiIGZvbnQtc2l6ZT0iMjQiIGlkPSJzdmdfNCIgeT0iNDEuOTk5OTc3IiB4PSI1Mi45OTk5ODUiIHN0cm9rZS13aWR0aD0iMCIgc3Ryb2tlPSIjMDAwMDAwIiBmaWxsPSIjMDAwMDAwIj5Kb2huPC90ZXh0PgogIDx0ZXh0IHhtbDpzcGFjZT0icHJlc2VydmUiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtZmFtaWx5PSJzZXJpZiIgZm9udC1zaXplPSIyNCIgaWQ9InN2Z181IiB5PSIxOTMuOTk5OTc3IiB4PSI5Ny45OTk5ODUiIHN0cm9rZS13aWR0aD0iMCIgc3Ryb2tlPSIjMDAwMDAwIiBmaWxsPSIjMDAwMDAwIj5YWVogQ29tcGFueTwvdGV4dD4KIDwvZz4KPC9zdmc+

显然，浏览器网址行copypasta不是最理想的。一旦SO支持SVG作为图像格式，我衷心支持有人更新我的答案，因为我缺乏一个方便的SVG处理负载的虚拟主机。

至于其他地方，here's how you can embed an SVG file in your page。但是，正如您所提到的，there are additional ways to do this.

Answer 2

这应该有效：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Render this</title>
    <style type="text/css">
        div, p {
            margin:0;
            padding:0;
            font-family: Helvetica;
            font-size:14px;
            color:#000;
            font-weight:bold;
        }
        div.box {
            padding:15px;
            width:272px;
            height:155px;
            border:2px solid #000;
            background-color:rgb(255,232,0);
        }
        div.box div.inner {
            height:100%;
            background:url("https://s3.amazonaws.com/signoffmainbucket/8CA8EC1A-C1C5-4390-9FC4-649648AA26C8.jpg") bottom right no-repeat;
        }
        p.name {
            margin-bottom:65px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="inner">
            <p class="name">John</p>
            <p>XYZ Company</p>
        </div>
    </div>
</body>
</html>

您也可以尝试使用此示例（html 4 transitional dtd）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Render this</title>
</head>
<body>
    <div style="margin:0;padding:15px; width:272px; border:2px solid #000;background-color:rgb(255,232,0);display: table-cell;vertical-align:middle;">
        <p style="margin:0;padding:0;font-family: Helvetica;font-size:14px;color:#000;font-weight:bold;">John</p>
        <div style="margin:0;padding:0;font-family: Helvetica;font-size:14px;color:#000;font-weight:bold;display:table;vertical-align:middle;"><span style="margin:0;padding:0;width:110px;display:inline-block;vertical-align:middle;">XYZ Company</span><img style="margin:0;padding:0;width:162px;vertical-align:middle;" src="https://s3.amazonaws.com/signoffmainbucket/8CA8EC1A-C1C5-4390-9FC4-649648AA26C8.jpg" alt="image"></div>
    </div>
</body>
</html>

HTML将在主要浏览器和iPhone及更大尺寸的屏幕尺寸上正确呈现

2 个答案: