Question

我的网站上某些浏览器的右边距有问题。页面加载时，内容不居中（即您必须向右滚动才能看到整个页面）。滚动后，看起来没有右手边距，文本只会向边缘移动。在我的计算机上，FF（版本22）和IE（版本7-10）上的网站看起来很好，但是当在其他计算机（和iOS上的Safari）上查看时，您可以看到概述的问题。有任何想法吗？我唯一能想到的是，我要求浏览器提供比屏幕上更多的空间，但我不确定如何测试它。更改CSS文件中的左右边距没有任何帮助。

编辑：我使用http://www.browserstack.com/测试各种浏览器版本，因为我没有在屏幕上看到此问题。

HTML：

//if browser is IE, displays IE specific navbar
if(strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== FALSE)
   {include('navbarIE.php');}
//if browser is anything else, include original navbar file
else
   include('navbar.php');

?>
<!--formatting and style-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
    <title>Daiko Construction Remodeling</title>


<style type="text/css">
div#wrapper 
{
        position: relative;
        margin-left: 0px;
        margin-right: 0px;
        top: 20px;
        width: 866px;

}
</style>



</head>
<body>
<br/>

<div id="wrapper">
   <p>For your conveniece, we have listed just a few of the projects that we most commonly undertake. 
  If there is a specific service that you require and it is not listed below, 
  please <a style="color: white;" href="contactus.php">contact us</a> for more information. Additionally, 
  we offer FREE estimates for our services. While larger projects may require us to do an on-site 
  evaluation and no two projects are exactly alike, we request that you send us a short email with 
  an inquiry or any question you might have. 
   <br><br>
   </span>
   <ul>
     <li>Window and door installation (European and Domestic)</li>
     <li>General and central HVAC, A/C, heating</li>
     <li>Remodelling of:</li>
     <ul>
       <li>kitchens</li>
       <li>bathrooms</li>
       <li>bedrooms</li>
       <li>basements</li>
   <li>etc.</li>
     </ul>
     <li>Flooring (wood and tile)</li>
     <li>House additions</li>
     <li>Lighting and electrical work</li>
     <li>Plumbing<br></li>
     <li>Regular handyman work</li>
     <li>And many others</li>
    </ul>
    <br>
   </div>
</div>
</div>

</form>

<?PHP

   include('footer.php');

?>


</body>
</html>

这是CSS：

body 
{
    font-family: "Vijaya", "Andalus", Serif;
    font-size: 20px;
    color: white;
    margin-left: 250px;
    margin-right: 250px;
}

ul.jsddm
{
    margin: 0;
    padding: 0;
    position: relative;
    line-height: 2.0em;

}

ul.jsddm a
{
    color: #000000;
    background-color: #F5DEB3;
    border: 1px solid #444;
    display: block;
    text-decoration: none;
    text-align: center;
    width: auto;
    height: 32px;
}

ul.jsddm a:hover
{
    color: #000;
    background-color: #FFF;
    height: 32px;
}

ul.jsddm > li
{
    position: relative;
    float: left;
    list-style: none;
    width: 20%;
}

Answer 1

您正在为body定义边距，但它没有定义的宽度。例如，使用FF22的元素检查器，可以看出它比它应该更窄（它甚至不包裹你的主div）。

由于您的wrapper div设置为866px，类似于body { width: 866px; }和，因为@Sam R.注明，为其定义auto页边距（{ {1}}或margin: auto;）就足够了。如果你想让它好一些，你可以在那之后相对调整你的div（例如100％）。

Answer 2

您网站的HTML中存在大量格式错误，但除此之外，您现在面临的问题似乎是在您的身体边缘。尝试设置

body { margin: auto; }

而不是

body { margin-left: 250px;
       margin-right: 250px;
    }

和你包含的div

{ margin: auto; }

设置容器右侧和左侧的固定边距将导致浏览器调整大小时出现问题。保证金：自动将您的内容居中。

某些浏览器中的HTML / CSS保证金问题

2 个答案: