网站监控显示问题答案

【问题标题】：Website monitor display issue网站监控显示问题
【发布时间】：2013-06-16 01:58:59
【问题描述】：

我有一个网站在不同的显示器上显示不同。桌面：笔记本电脑：

HTML

<body>
<div id="Links">
<a href="About.html"><img src="Slideshow/About.png" width="140em" /></a> 
<br /><br />
<a href="Contact.html"><img src="Slideshow/Contact.fw.png"  width="140em" /></a>
<br /><br />
<a href="Services.html"><img src="Slideshow/Services.fw.png"  width="140em" /></a>
</div>

<div id="mainText">
<h1>Contact</h1>
<p>If you want to contact me please call at <b>1.800.SUCCESS</b> or use the form below to sned me an email!</p>
</div>





<form name="contactform" method="post" action="send_form_email.php">
<table id="conTable">
<tr>
 <td valign="top">
  <label for="first_name">First Name *</label>
 </td>
 <td valign="top">
  <input  type="text" name="first_name" maxlength="50" size="30">
 </td>
</tr>
<tr>
 <td valign="top"">
  <label for="last_name">Last Name *</label>
 </td>
 <td valign="top">
  <input  type="text" name="last_name" maxlength="50" size="30">
 </td>
</tr>
<tr>
 <td valign="top">
  <label for="email">Email Address *</label>
 </td>
 <td valign="top">
  <input  type="text" name="email" maxlength="80" size="30">
 </td>
</tr>
<tr>
 <td valign="top">
  <label for="telephone">Telephone Number</label>
 </td>
 <td valign="top">
  <input  type="text" name="telephone" maxlength="30" size="30">
 </td>
</tr>
<tr>
 <td valign="top">
  <label for="comments">Comments *</label>
 </td>
 <td valign="top">
  <textarea  name="comments" maxlength="1000" cols="25" rows="6"></textarea>
 </td>
</tr>
<tr>
 <td colspan="2" style="text-align:center">
  <input type="submit" value="Submit">
 </td>
</tr>
</table>
</form>

</body>

CSS

    body
{

        background-image:url(Pictures/background.jpg);
        background-repeat:no-repeat;
        background-size:100%;

}
    #mainText
    {

    position: absolute;
    width: 70%;
    float: left;
    left: 14em;

}
#conTable
{

    left:14em;
    top:8em;
    position:absolute;
}

#Banner
    {
            position:absolute;
            padding-left:40%;
    }
#Links
    {
            position:absolute;
            float:left;
            width:50px;

    }

谁能告诉我为什么我的笔记本电脑和我的台式机看起来不一样，以及如何修复它。从图片中可以看出，我笔记本电脑上的所有东西都向左移动了。

【问题讨论】：

我敢打赌，要么笔记本电脑浏览器被放大，要么桌面浏览器被缩小。尝试在它们中同时按下 Ctrl-0。
@Juhana 两个缩放级别都是 100%
我在图片上看到了不同的网址。您确定两者上的文件相同吗？
@WooCaSh 它们是同一网页的 2 张不同图像。一个来自台式机，一个来自笔记本电脑
@TheAce 一个来自本地磁盘，另一个来自服务器。您可以从服务器测试两者吗？并确保在 Chrome DevTools 中禁用缓存 ;)

标签： html css layout

【解决方案1】：

尝试将“相对”#container 包裹在所有“绝对”div 周围。我在下面调整了您的代码：

<body>
<div id="container">
<div id="Links">
<a href="About.html"><img src="Slideshow/About.png" width="140em" /></a> 
<br /><br />
<a href="Contact.html"><img src="Slideshow/Contact.fw.png"  width="140em" /></a>
<br /><br />
<a href="Services.html"><img src="Slideshow/Services.fw.png"  width="140em" /></a>
</div>

<div id="mainText">
<h1>Contact</h1>
<p>If you want to contact me please call at <b>1.800.SUCCESS</b> or use the form below to sned me an email!</p>
</div>


<form name="contactform" method="post" action="send_form_email.php">
<table id="conTable">
<tr>
 <td valign="top">
  <label for="first_name">First Name *</label>
 </td>
 <td valign="top">
  <input  type="text" name="first_name" maxlength="50" size="30">
 </td>
</tr>
<tr>
 <td valign="top"">
  <label for="last_name">Last Name *</label>
 </td>
 <td valign="top">
  <input  type="text" name="last_name" maxlength="50" size="30">
 </td>
</tr>
<tr>
 <td valign="top">
  <label for="email">Email Address *</label>
 </td>
 <td valign="top">
  <input  type="text" name="email" maxlength="80" size="30">
 </td>
</tr>
<tr>
 <td valign="top">
  <label for="telephone">Telephone Number</label>
 </td>
 <td valign="top">
  <input  type="text" name="telephone" maxlength="30" size="30">
 </td>
</tr>
<tr>
 <td valign="top">
  <label for="comments">Comments *</label>
 </td>
 <td valign="top">
  <textarea  name="comments" maxlength="1000" cols="25" rows="6"></textarea>
 </td>
</tr>
<tr>
 <td colspan="2" style="text-align:center">
  <input type="submit" value="Submit">
 </td>
</tr>
</table>
</form>
</div>
</body>

CSS：

body
{

        background-image:url(Pictures/background.jpg);
        background-repeat:no-repeat;
        background-size:100%;

}
    #mainText
    {

    position: absolute;
    width: 70%;
    left: 14em;

}
#conTable
{

    left:14em;
    top:8em;
    position:absolute;
}

#Banner
    {
            position:absolute;
            padding-left:40%;
    }
#Links
    {
            position:absolute;
            top: 0;
            left: 0;
            width:50px;

    }
    #container {position: relative; width: 100%}

【讨论】：