隱藏內容而不隱藏div？

這可能是有史以來最簡單的問題，但嘗試我可能根本找不到它。我現在正在一個網站上工作，我希望儘可能少地使用<div>元素，以保持HTML的漂亮和易於編輯。目前我基本上有：隱藏內容而不隱藏div？

<html doctype etc etc> 
<head> 
    <title and meta tags> 
</head> 
<body> 
    <div id="wrapper"> 
     <div id="header"></div> 
     <div id="body"></div> 
     <div id="sidebar"></div> 
     <div id="footer"></div> 
    </div> 
</body> 
</html>

非常簡單和優雅，是嗎？然而，客戶希望他們的標題由包含其公司名稱和徽標的單個大圖像組成。所以我的選項非常清晰 - 可以使用<img>標籤，也可以在標頭<div>上設置background-image屬性。然後，我開始思考SEO。對於Google來說，如果標頭<div>包含一個<h1>元素和她的網站標題，但是這個元素必須隱藏起來，以便人類用戶只能看到背景圖片，那就太好了。

雖然如果您要使用display:none; css屬性，那麼整個<div>會消失，包括背景。有沒有隱藏<div>的內容而不隱藏<div>本身的好方法？

來源

2011-07-19 stevendesu

你有沒有試圖在H1上應用hide？

<div id="header"> 
    <h1>Company title</h1> 
</div>

你的風格是：#header h1{display:none;visibility:hidden;}

UPDATE 顯然，我們都只是有那些日子之一。如果你想使H1真正的SEO /屏幕閱讀器友好的，這將是更好地與你的CSS來做到這一點：

#header h1{ 
    width:XXXpx; 
    hight:XXXpx; 
    background:url('image/location.png'); 
    text-indent:-9999px; 
    overflow:hidden; 
}

這樣，你的文字是居然還有頁面上呈現，它只是一種關閉屏幕。

來源

2011-07-19 19:51:25 Joshua

一個更好的方法是使用一個id/class爲h1，因爲其他h1會出現在頁面中，並最終隱藏起來，所以像 'h1＃hide {display：none; visible：hidden;}'你怎麼看？ – DaMainBoss

是的，這是我的錯誤。感謝您的支持。更新。儘可能避免使用額外的ID /類，並使用文檔流來指定 - 但這只是一種偏好。使其更容易閱讀和稍後更改。 :) – Joshua

我很愚蠢，我沒有想到這一點。謝謝。一個側面說明，雖然在像我這樣的簡單頁面上，它沒有什麼區別 - 使用類或ID比使用遞歸定義快得多。所以'h1.hide'會是最優的，因爲'#header h1'需要更長的時間才能渲染（當頁面上有成千上萬的元素時纔會顯着） – stevendesu

您可以取代#header格與h1，如果你想這個標籤，在上述h1，甚至把它（公司名稱）的一些文字，並使用text-indent將其隱藏設置背景圖片。

另外，爲了最大限度地減少元素數量，您可以使用body作爲包裝，並且如果您需要整頁背景，請將其設置在html元素上。

來源

2011-07-19 19:51:56 Litek

我實際上考慮使用''作爲包裝，但最終的網站需要在背景圖像的中心位置放置一個960像素的容器，然後我需要在此容器外面使用純色。我不知道該怎麼做，除了將背景顏色應用於''和將背景圖像應用於'＃wrapper'之外。 – stevendesu

只需在html上設置純色，並在body上設置背景圖像：'html {bacground：defec8; } body {width：960px;背景：網址（img.jpg）; margin：0 auto}' – Litek

在H1標籤上設置display: none而不是div，並在div上使用背景圖片。

來源

2011-07-19 19:54:06

隱藏內容而不隱藏div？

回答

相關問題