Css H1未停留在集装箱内_Css - Fatal编程技术网

Css H1未停留在集装箱内

css

Css H1未停留在集装箱内,css,Css,有一点问题，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"> 未关闭。好吧

有一点问题，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">

未关闭。

好吧，我的问题是，我应该在询问之前捕捉到打开的div，但即使如此，我仍然会遇到同样的问题，所以我找到了答案，并附带说明感谢所有捕捉到打开的div标签的人。a发现的问题是，a为主体声明的线条高度对于如此大的字体大小来说太小了，以至于我刚刚关闭了它，仍然得到相同的问题

    <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; }