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