Question

h1没有留在其包含的div中有一点问题，奇怪的是它留在它中直到h1达到某个字体大小然后它开始走到div之外并重叠到其他内容中。这是我的html和CSS，我也使用eric meyer重置表，我的字体样式表只包含我的@ font-face字体样式，因为我使用的是自定义字体：

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">

    <title>Lawrence Chabela - User Interface Design</title>

    <!-- CSS --> 
    <link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" charset="utf-8"> 
    <link rel="stylesheet" href="css/font.css" type="text/css" media="screen" charset="utf-8"> 
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="utf-8"> 

    <!--[if IE 6]>
        <link rel="stylesheet" href="/css/ie6.css" type="text/css" media="screen" charset="utf-8">
    <![ endif]--> 
    <!--[if IE 7]>
            <link rel="stylesheet" href="/css/ie7.css" type="text/css" media="screen" charset="utf-8">
    <![ endif]--> 

    <link rel="shortcut icon" href="/favicon.ico"> 
    <link rel="apple-touch-icon" href="/apple-touch-icon.png"> 
</head>
<body>
    <div class="siteWrap">
        <div class="nav clearfix">
            <ul class="clearfix">
                <li>
                    Home<span>is where I work.</span>
                </li>
                <li>
                    About<span>this dude.</span>
                </li>
                <li>
                    Folio<span>take a peek.</span>
                </li>
                <li>
                    News<span>whats going on.</span>
                </li>
                <li>
                    Contact<span>got some work?</span>
                </li>
            </ul>
        </div>
        <div class="slogan">
    <h1>Why Is this h1 not staying in here</h1>
    </div>
</body>

/*Clearing Floats*/
html body * span.clear, html body * div.clear, html body * li.clear, html body * dd.clear { background: none; border: 0; clear: both; display: block; float: none; font-size: 0; list-style: none; margin: 0; padding: 0; overflow: hidden; visibility: hidden; width: 0; height: 0; }
.clearfix:after { clear: both;content: '.';display: block;visibility: hidden;height: 0; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }

/*Base*/
body { font: .875em/1.295em AurulentSansRegular,Impact,Arial,Geneva,Helvetica,sans-serif; background: #f2f2f2 url('../img/top_dot.png') no-repeat scroll center 9px; border-top: 9px solid #000; }
    .siteWrap { width: 1024px; margin: 0 auto; }
        .nav { width: 67%; margin: 50px auto 0; padding: 0 0 15px; border-bottom: 1px solid #BFBFBF; }
            .nav ul { margin: 0 auto; width: 94%;   }
            .nav li { float: left; padding: 0 68px 0 0; font-size: 1em; text-transform: uppercase; }
                .nav li:last-child { padding: 0; }
                .nav li span { padding: 2px 0 0; clear: both; display: block; color: #868686; font-size: .875em; text-transform: none; }
        .slogan { text-transform: uppercase; }

Answer 1

<div class="slogan">未关闭。

H1不能留在容器中

1 个答案: