我如何擺脫頁面底部的空間在IE

我正在嘗試製作一個頁面，其中包含一個用於在iframe中加載的圖像。但身體標籤底部有4px的空間，我似乎無法擺脫。我的繼承人簡化來源：我如何擺脫頁面底部的空間在IE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html> 
<head> 
    <style> 
     body, a, head, img 
     { margin: 0; 
      padding: 0; 
      border: none; 
      border-width: 0px; 
     } 
    </style> 
</head> 

<body> 
    <a><img src="http://www.halolz.com/wp-content/uploads/2008/09/portals.jpg"></a> 
</body> 
</html>

如果內圖像的底部的4個像素收縮你的窗口你會發現，你會得到一個滾動條。廢話是從哪裏來的？

來源

2010-07-09 B T

圖像被放置在文本行，它在的底線。圖像下方的空間基線和底部之間的距離的字符單元格，其中有掛起字符的空間，如g和j。如果瀏覽器的默認字體和字體大小爲四個像素，則其他瀏覽器中的結果會稍有不同。

一個解決方案是使圖像成爲塊元素，這樣它就不是文本行的一部分，並且在基線下面沒有空格。錨標記是一個內聯元素，它不能在其內部都有一個塊級元素，所以做出的元素是有意義的應用該樣式後，你必須做錨標記塊元素也：

a, img { display: block; }

（爲了使代碼有效的XHTML，你還需要一個在anchor標籤之外的block元素，body標籤不能直接包含內聯元素，使用style將anchor標籤作爲block元素不會有幫助，這個結構必須是有效的也在風格應用之前）。

來源

2010-07-09 01:23:53 Guffa

這也工作 – 2010-07-09 01:30:37

+1我更喜歡這個答案，因爲它沒有將神祕div添加到HTML。並且，它解釋了IE渲染「錯誤」的來源。 – 2010-07-09 01:37:11

所有的互聯網瀏覽器都有一小部分填充他們添加到頁面本身。擺脫它的一個絕對的方法是簡單地從每個元素中加入所有邊距和填充。

* 
{ 
    margin: 0px; 
    padding: 0px; 
}

當然，這將在您的網頁中刪除margin和padding形式每一個元素，所以採用這種謹慎，當你需要填充和保證金覆蓋此默認（所有其他選擇有比這更高的優先級全球性的，所以這很容易）。

來源

2010-07-09 01:08:43 Scott

這是一個好主意，但即使這樣也行不通！ – 2010-07-09 01:20:42

所有瀏覽器都帶有默認樣式。儘管您正在重置頁面的標籤，但在您的CSS中沒有像image這樣的標籤。

我建議使用更全局的重置樣式表。我喜歡從Eric Meyer。像這樣簡單的事情可以幫助平衡瀏覽器之間的競爭領域。

來源

2010-07-09 01:08:43

替換IMG像你的風格

來源

2010-07-09 01:09:43 m0g

「圖像」是一個錯字，'img'不能修復它。 – 2010-07-09 01:20:21

把你的「a」和「IMG」標籤的DIV中這樣

<div><a><img src="http://www.halolz.com/wp-content/uploads/2008/09/portals.jpg"></a></div>

來源

2010-07-09 01:10:35 hallie

即將發佈相同的東西。這解決了它。 – David 2010-07-09 01:12:00

你們是不是也試過這個？「圖片」標籤是一個錯字，實際上我的原始文檔中有'img'。這實際上並不能解決它。 – 2010-07-09 01:20:03

我測試過了。您是否確保在開始的

and ending

標籤之間不留空格？這是真正的修復。如果你輸入空格，你仍然會遇到問題。 – David 2010-07-09 01:21:07

這是繼上海麗的答案，這裏是一個完整的工作示例，已經通過多種方式進行了更新，使其實際符合XHTML 1.0 Transitional並且不顯示空格。確保不給<後引進的空白/ A >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>This is the title</title> 
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" /> 
<style type="text/css"> 
body, a, head, img 
{ 
    margin: 0px; 
    padding: 0px; 
    border: none; 
    border-width: 0px; 
} 
</style> 
</head> 
<body> 
    <div><a><img alt="Cat In Portal" src="http://www.halolz.com/wp-content/uploads/2008/09/portals.jpg" /></a></div> 
</body> 
</html>

來源

2010-07-09 01:22:25 David

嘿！我甚至沒有任何div。但我介紹了一個，並確保不留空間。這解決了這個問題。多謝，夥計。 – 2010-07-09 01:26:00

我如何擺脫頁面底部的空間在IE

回答

相關問題