html - 定义什么使网站在移动设备上看起来一样

Question

我正在尝试创建一个在所有浏览器上看起来都一样的网站。我使用 13px 的字体，每个边距和填充都定义为像素。在这里，我创建了 3 个 div，以便左侧部分、中间部分和右侧部分都垂直对齐。这 3 个 div ar 包裹在“上层”-div 中。在我的桌面(IE 和 Chrome)上，它看起来不错，并且对齐。但是当我想在我的手机上查看我的网站时，中间和右边的部分比左边高。是否有一个我忘记定义的属性，它在每种类型的浏览器中具有不同的默认设置？

非常感谢。这是我正在使用的代码:

<div class="left">

<form method="post" action="small.php">
<input type="hidden" name='form' value='wasSubmited' />
<input type="submit" name="1" value="Attempt" style="margin-top:33px">
<input type="submit" name="2" value="Attempt" style="margin-top:33px">
<input type="submit" name="3" value="Attempt" style="margin-top:20px">
<input type="submit" name="4" value="Attempt" style="margin-top:20px"> 
</form>
</div>

<div class="middle">
<p style="margin-top:25px">Bla bla bla Bla bla bla Bla bla bla Bla bla bla</p>
<p style="margin-top:24px">Bla bla bla</p>
<p style="margin-top:22px">Bla bla bla</p>
<p style="margin-top:22px">Bla bla bla</p>
</div>

<div class="right">
<p style="margin-top:46px"><?php echo max(0,round($chance1)); ?>%</p>
<p style="margin-top:24px"><?php echo max(0,round($chance2)); ?>%</p>
<p style="margin-top:22px"><?php echo max(0,round($chance3)); ?>%</p>
<p style="margin-top:22px"><?php echo max(0,round($chance4)); ?>%</p>
</div>

CSS:

div.upper {
width:850px;
position:absolute;
margin:0px auto;
background-color:#e7eef9;
left:75px;
top:50px;
border:1px solid;
height:477px;
overflow:hidden;
}

div.left {
width:70px;
margin:0px;
float:left;
padding:0px 20px 0px 40px;
text-align:left;
height:320px;
padding-top:50px;
}

div.middle {
width:300px;
margin:0px;
float:left;
text-align:left;
height:320px;
padding-top:50px;
}

div.right {
width:100px;
margin:0px;
float:right;
background-color:#d7e3f5;
height:320px;
padding-top:50px;
}

Answer 1

我怀疑你问题的根源与你 css 中的这一行有关:

padding:0px 20px 0px 40px;

在 div.left { 选择器下。

中间和右边的 div 只有顶部填充，这解释了为什么它们显示不同。