Question

我对编程非常陌生，我正在尝试编写一个网站。我在过去的两天里花了大约5个小时，试图在各种浏览器上正确排列，我遇到了一些问题。首先，请允许我说，如果此问题已在某处得到解答，我很抱歉。我已经看了很多类似于我的问题的解决方案，没有什么对我有用，所以请耐心等待。首先，我遇到了在不同浏览器上随机出现的问题。当我试图在CSS中解决这个问题时，我在其他浏览器中产生了新的问题。其次，当浏览器窗口改变大小时，页面上的所有元素开始移动并重叠而不是仅仅隐藏在窗口之外。我的第三个问题（有点）是我的代码看起来很糟糕。我不确定为什么有些元素必须有-4.5％的边距才能与需要-5％边距的其他元素对齐;而且我不确定为什么我必须在某些元素上加上负边距！提前感谢您的所有帮助，并阻止我邮寄。

约什

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>Horton Computer Solutions Home</title>
    <link href="css/styles.css" media="screen" rel="stylesheet" type="text/css" />
</head>

<body>
    <div id="page">
        <div id="site_title", style="float:left">

  <span class="titleleft">Horton</span>|<span class="titleright">Computer Solutions</span>
</div>
            <div id="title_bar", style="float:right">
                <ul>
                    <pre><a href="#">Home</a>    <a href="#">About Us</a>    <a href="#">Services</a>    <a href="#">Guarantee</a>    <a href="#">Blog</a>    <a href="#">Contact</a></pre>
                </ul>
                <br style="clear:both"/>
            </div>
<div id="mainContent">
    <div id="subContent1">
    </div>
    <div id="subContent2">
    </div>
    <div id="subContent3">
    </div>
</div>
</div>
</body>
</html>

和CSS

/* language: css */
BODY
{
    font-family: Calibri, Arial, Helvetica, "Helvetica Neue", "Times New Roman";
    font-size: 16px;
    color: #FFF;
    text-align: left;
    background-color: #062134;
    margin: auto;
    padding: 20px 0 60px;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
}
A
{
    font-family: Helvetica;
}
DIV#title_bar UL A
{
    text-decoration: none;
    color: #FFFFFF;
}
DIV#title_bar UL A:hover
{
    text-decoration: underline;
    color: #FFFFFF;
}
DIV#title_bar UL A:visited
{
    text-decoration: none;
    color: #FFFFFF;
}
DIV#site_title
{
    font-family: Helvetica;
    font-weight: bold;
    font-size: 27px;
    color: #FFFFFF;
    margin: -4.5% 0 0 6.9%;
}
DIV#title_bar
{
    font-family: Helvetica;
    font-size: 16px;
    color: #FFFFFF;
    list-style: none;
    margin: -5% auto auto 40%;
    text-align: center;
    position: absolute;
}
DIV#contentBox
{
    background-color: #1468A8;
    border-style: none;
    width: 338px;
    height: 185px;
    padding: 19px;
}
#site_title .titleleft
{
    color: #FFFFFF;
}
#site_title .titleright
{
    color: #46C8FF;
}
DIV#mainContent
{
    border: 1px solid #FFFFFF;
    /*+box-sizing:border-box;*/
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    width: 950px;
    height: 1135px;
    background-color: #FFFFFF;
    margin: 10% 6%;
    padding: 15px;
}
DIV#subContent1
{
    color: #FFFFFF;
    width: 292px;
    height: 255px;
    background-color: #000000;
    margin: 440px 0 0;
}
DIV#subContent2
{
    color: #FFFFFF;
    width: 292px;
    height: 255px;
    background-color: #000000;
    margin: -255px 0 0 313px;
}
DIV#subContent3
{
    color: #FFFFFF;
    width: 292px;
    height: 255px;
    background-color: #000000;
    margin: -255px 0 0 626px;
}
#site_title .floatleft
{
    float: left;
    position: relative;
    left: 0px;
    top: 0px;
}
#title_bar .floatright
{
    float: right;
    position: relative;
    left: 0px;
    top: 0px;
}

Answer 1

您的代码语义遍布整个商店，您遇到问题并不奇怪，在尝试解决任何跨浏览器问题之前，您必须确保代码验证（http://validator.w3.org/）

首先我会说删除复杂的doctype并使用HTML5，它是严格的并且可以在任何地方使用。如果你能提供帮助，请始终远离过渡性文件类型。

所以

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

变为

<!DOCTYPE html>
<html>

在元素上设置多个属性时，不需要逗号

<div id="title_bar", style="float:right">

变为

<div id="title_bar" style="float:right">

避免样式属性，这里大多数元素都有id，你可以从样式表中设置样式（http://robertnyman.com/2008/11/20/why-inline-css-and-javascript-code-is -such-A-坏事情/）

90％的时间你不需要清除：两者都有溢出：隐藏在容器元素上足以清除浮动的孩子。

UL元素必须包含LI元素

<ul>
    <pre><a href="#">Home</a>....</pre>
</ul>

变为

<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>

为CSS插入链接标记时，除非为各种设备提供多个文件，否则不需要media =“screen”部分，如果未设置该属性，则为默认值。

当你的CSS文件中的引用标签不使用大写时，它是相当旧的时尚并没有真正使用（也有些人可能认为他们更喜欢它，你不会看到任何“着名的”开发人员使用它们）

现在为你的样式问题你的BR style =“clear：both”在菜单元素内部，当它应该在之后为了清除标题和菜单（也就像说只是有一个包装它们并且有溢出：隐藏在CSS中，它还会更好地将您的标题与您的内容分开）

float：left + position：相对类型的冲突。此外，如果你设置position：relative不需要设置top：0和left：0就是元素在某个位置的位置：相对情况。

我认为至少应该把你引向正确的方向，或者以某种方式帮助你：）

Answer 2

像

这样的评论

<!-- language: css -->

css文件中不允许

。仅使用

/* language: css */

发表评论。

Answer 3

如果您希望您的代码在所有浏览器上都能正常工作。废弃您的样式并从重置样式表开始:(谷歌：重置样式表，第一个链接）。

所有浏览器的格式化很可能是相同的（除了各个浏览器限制，即：ie6,7上没有css3等）。我认为，一旦消除了浏览器样式差异，您就会发现格式化更容易。

Answer 4

第二个问题的解决方案

  <body>
   <center>
     //do all here
  </center>
 </body>

Answer 5

你的错误就在这里，在id结束后删除逗号

    <div id="title_bar" style="float:right">

检查一下http://jsfiddle.net/srinivasan/aXaYg/2/

不能使网站在不同的浏览器中正确显示

5 个答案: