什么定义如此网站看起来一样在移动

Question

我试图创建一个网站，在每个浏览器上看起来都一样。 我使用13px的字体，并且每个边距和填充都定义为像素。 这里我创建了3个div，这样左边，中间和右边都是垂直对齐的。这3个div包裹在“upper”-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只有顶部填充，这就解释了为什么它们显示不同。

Answer 2

中间部分和右侧部分变得比左侧高，因为当屏幕较小时，div被推下，因为没有足够的空间。您可以通过将所有内容放在容器中来解决此问题。像这样：

<div class="container"> <!-- use a container --> 
<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> 
</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; 
} 

.container { 
    width: 1000px; /*or whatever width you want, but the container has to be at least as big as the total width of everything inside*/ 
}