1

我目前正在为我的网站制作新的外观和系统,但是,我遇到了行/文本高度问题。我试过使用 line-height,但没有运气,因为它开始与 div 和其他文本重叠,而且看起来不正常。

当前的 CSS [#Content 是我正在谈论的主要容器]

body {
                background:#000 url(/Media/Background.png) top center;
            }
            #Wrap { 
                width:100%; 
                height:100%; 
            }
            #Header { 
                position:absolute; 
                width:100%;
                height:100px; 
                left:0px; 
                top:0px; 
                background-color:#000; 
                color:#FFF;
                text-align:center;

            }
            #Logo {
                background:url(/Media/TeknikkInfo.png) left no-repeat;
                position:absolute;
                height:100px;
                width:452px;
                left:10px;
                cursor:pointer;
            }
            #Navigation { 
                position:absolute; 
                width:100%;
                height:50px; 
                left:0px; 
                top:100px; 
                background:#1f1f1f;
                line-height:10px;
                text-align:center;

            }
            #Content { 
                border:1px solid #000;
                background:url(https://8b300d69518d5a96e5de-3852609c222273912115f7d2fbf93e19.ssl.cf1.rackcdn.com/BackgroundTeknikk.png);
                position:relative; 
                margin:0px auto 0px auto;
                width:900px;
                top:152px; 
                background-color:#000; 
                text-align:center;
                color:#FFF;
                line-height:0px;

                font-size:20px;

                text-shadow:
                -1px -1px 0 #000,
                1px -1px 0 #000,
                -1px 1px 0 #000,
                1px 1px 0 #000;  

            }
            .Button {
                min-width:100px;
                height:40px;
                position:relative;
                top:5px;
                line-height:40px;
                margin:0px auto 0px auto;
                text-align:center;
                background:url(https://8b300d69518d5a96e5de-3852609c222273912115f7d2fbf93e19.ssl.cf1.rackcdn.com/Button.png);
                cursor:pointer;
                display:inline-block;
                border:1px solid #000;
            }
            #Title {
                width:400px;
                height:27px; 
                margin:-22px auto 0px auto;
                -moz-border-radius: 15px;
                border-radius: 15px;
                background:#FFF;
                color:#000;
                top:0px;
                text-align:center;

            }
            #Seal { 
                position:absolute; 
                top:150px;
                width:132px;
                height:70px; 
                left:0px;  
                background:#1f1f1f              top;

                text-align:left;
            }
            #Seal > span { display:inline-block;}

line-height:0px 的样子; http://img141.imageshack.us/img141/9388/55420dcd45cd4271b2b3095.png

这是一个问题,因为有文本和链接会导致问题。它也适用于这样的输入字段。 在此处输入图像描述

当我删除行高时,它看起来像这样。 在此处输入图像描述 当我为 PHP 打开 display_errors 时,它看起来很正常。所以,有什么问题,我希望它是正常的,而不是像一个 1000px 长的空间网站

我以前也遇到过这个问题,但并不关心它,就像一些小型网站一样。那么,我怎样才能使高度正确,而不让它与文本重叠,所以超链接是半可点击的? https://teknikk.info/teknikk.info/是开发者所以如果你需要查看所有代码。

4

1 回答 1

1

页面https://teknikk.info/teknikk.info/上的<h1>和元素具有您未调整的默认边距。浏览器有一个“用户代理样式表”,其中包含当该属性没有其他样式信息时浏览器应用的 CSS。<p>

在 Chrome 中,这大约是 .67em<h1>和 1em <p>

您可以使用以下 CSS 删除此边距:

h1, p {margin: 0;}

但是,这可能会使您的文本非常难以阅读。

你最好排版你的文件。这是一篇关于设置网络可读性边距的好文章:http: //24ways.org/2006/compose-to-a-vertical-rhythm/

于 2012-12-26T04:48:14.930 回答