文本和輸入高度不對

我現在正在爲我的網站製作一個新的外觀和系統，但是，我堅持行/文本高度問題。我曾嘗試使用行高，但沒有運氣，因爲它開始重疊到div和其他文本，並沒有看起來正常。文本和輸入高度不對

當前CSS [＃內容是我說的主容器約]

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：0像素;

由於文本和鏈接導致問題一直存在問題。它也適用於像這樣的輸入字段。 enter image description here

當我刪除行高時，它會看起來像這樣。 enter image description here 當我打開PHP的display_errors，它看起來很正常。所以，這是什麼問題，我想它是正常的，而不是像一個1000px長的空間網站的時候

我也一直卡在這之前，但沒有關心它，因爲它是對於一些小型網站。那麼，我怎樣才能使高度是正確的，沒有它與文本重疊，所以超鏈接是一半點擊？ https://teknikk.info/teknikk.info/是開發者如此，如果你需要看所有的代碼。

來源

2012-12-26 Teknikk

頁面https://teknikk.info/teknikk.info/上的<h1>和<p>元素在它們上有一個默認邊距，您沒有調整。瀏覽器有一個「用戶代理樣式表」，其中包含瀏覽器在沒有該屬性的其他樣式信息時應用的CSS。

在Chrome中，<h1>約爲0.67em，<p>約爲1em。

你可以刪除該保證金與下面的CSS：

h1, p {margin: 0;}

然而，這可能會令你的文字相當不可讀。

你最好是排版你的文檔。這裏有一篇關於在網頁上設置頁邊可讀性的好文章：http://24ways.org/2006/compose-to-a-vertical-rhythm/

來源

2012-12-26 04:48:14 oksushi

文本和輸入高度不對

回答

相關問題