0

我的网站上某些浏览器的右侧边距有问题。当页面加载时,内容不居中(即您必须向右滚动才能看到整个页面)。滚动后,似乎没有右侧边距,文本只是运行到边缘。该站点在我的计算机上的 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%;
}
4

2 回答 2

1

您将边距定义为body,但它没有定义的宽度。例如,使用 FF22 的元素检查器,可以看到它比应有的范围更窄(它甚至没有包裹你的主 div)。

由于您的wrapperdiv 设置为 866 像素,因此就像body { width: 866px; }@Sam R. 指出的那样,定义auto它的边距(margin: auto;margin-left: auto; margin-right: auto)就足够了。如果你想让它变得更好一点,你可以在此之后相对调整你的 div 大小(例如 100%)。

于 2013-07-25T22:59:33.353 回答
0

您网站的 html 中有很多格式错误,但除此之外,您现在面临的问题似乎在于您的正文页边距。尝试设置

body { margin: auto; }

代替

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

和你的包含 div

{ margin: auto; }

为容器的左右两侧设置固定边距会在调整浏览器大小时导致问题。边距:自动将使您的内容居中。

于 2013-07-25T22:55:13.393 回答