Question

css中的网站布局问题。 http://browsershots.org/http://rssreaderbg.net/indexed.htm 这是页面： http://rssreaderbg.net/indexed.htm 问题出在按钮上。它们被截断，徽标不可见。代码：

<html xmlns="http://www.w3.org/1999/xhtml"><head>


    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <style>
        body{
            padding:30px 0 0 0; 
            margin:0;

        }
        #up {

            background:#1ea1de;
            margin-top:-100px;
            height:300px;
            width:100%;

        }
        #logo {
            background:url(logo3.png)no-repeat;
            width:100%;
            height:89px;
            margin-top:-200px;
        }
        .clear{
            clear:both; height:0px; font-size:0px; line-height:0px;
        }
        #nav{
            margin-top:-89px;
            margin-left:300px;
            padding:0;
            list-style-type:none;

        }

        #nav li{

            float:left;
        }

        #nav a{
            padding-left:5px;
            display:block;
            float:left;
            height:104px;
            color:#fdfefe;
            font: 39px Tahoma;
            text-decoration:none;
            background: url(levo.gif) no-repeat;
            margin-top:-72px;


        }

        #nav a strong{
            padding:3px 9px 0 0;
            height:80px;
            float:left;
            display:block;
            cursor:pointer;
            font: 39px Tahoma;
            background: url(111111113.gif) no-repeat right top;
    margin-left:14px;
    margin-top:33px;

        }



    </style>
<div id="up"></div> 
</head><body>
        <div id="logo"></div>
        <ul id="nav">
            <li><a href="#"><strong>Nachalo</strong></a></li>
            <li><a href="#"><strong>Funkcii</strong></a></li>
            <li><a href="#"><strong>Vxod</strong></a></li>
        </ul>
        <div class="clear"></div>
    </body></html>

Answer 1

HTML代码无效，因此将以怪癖模式呈现。这对IE尤为重要。

html标记中的命名空间表示XHTML，但代码是HTML（因为元标记未关闭）。

您在head部分中有一个div标记，这是不允许的。

因此，首先添加an appropriate doctype tag以指定您正在使用的HTML风格，并确保代码有效。

HTML validation result

由于HTML被破坏，CSS无法验证：

CSS validation result

Answer 2

首先，准备好让IE搞砸CSS。

现在，为什么要<div id="up">？只需创建1px宽和repeat-x的背景图像，您就会更好。然后，您可以相对于页面定位徽标和菜单，而不是<div id="up">。

看看你的CSS，看起来你真的用锤子来做螺丝刀。

IE css的问题

2 个答案: