CSS百分比在IE中完全失敗

我剛完成設計我的攝影網頁。我使用Chrome作爲我的測試瀏覽器。CSS百分比在IE中完全失敗

但在IE瀏覽器打開我的網頁，什麼也沒有看到。在遇到一些麻煩之後，我將問題隔離到了使用百分比的事實。我在網上搜索解決方案，但一切都是關於小變化（與填充和百分比有關）。

下面是一個簡單的HTML文件，在Chrome的作品完美，但不是所有的IE（股利爲像素少中，通過文本的存在略有擴大）。非常感謝您的幫助。如果我無法解決這個問題，我將不得不徹底重新設計我的網站。

<html> 
<head> 
    <title>A test HTML</title> 
    <style type="text/css"> 
     #currpage 
     { 
      position: absolute; 
      bottom: 18%; 
      right: 10%; 
      left: 35%; 
      top: 15%; 
      border:2px solid green; 
      z-index: 240; 
     } 
    </style> 
</head> 
<body> 
    <div id="currpage" style="visibility: visible; opacity: 1;"> 
     This is just a test. 
    </div> 
</body> 
</html>

來源

2012-05-15 small fish

在我的小VirtualBox上適用於IE8。你在測試什麼版本？ –

您是否嘗試過...實際製作格式良好的HTML文件？

如果沒有DOCTYPE，瀏覽器呈現的怪癖模式的頁面。在IE的情況下，它會像在IE5.5中那樣呈現，但是它不支持很多現在基本的東西。

添加<!DOCTYPE HTML>到文件的開始。

編輯：當你在它，總是包含內容類型<meta>標籤（如<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />使瀏覽器知道編碼是什麼還考慮增加<meta http-equiv="X-UA-Compatible" content="IE=edge" />迫使IE使用最嚴格的。標準模式，它們都出現在我的每一個頁面上，甚至是空白模板上，DOCTYPE和Content-Type是必需的（如果你想讓它實際工作），Compatible頭是可選的（我主要用它來擺脫了兼容模式按鈕是煩人接近刷新按鈕...）

來源

2012-05-15 19:43:39

對於DOCTYPE建議+1，但示例_is_實際上是格式良好的。雖然這不是有效的。 –

重新編輯：'meta content-type'標籤不是*必需的，儘管沒有一個標籤混淆了W3驗證器。所以把它放進去不會有什麼傷害的。但是，對於HTML5，「meta charset」標籤更有意義。 –

謝謝！這解決了我的問題。我非常專注於將頭部和身體標籤內的所有東西都放在正確的位置，所以我忘了定義文檔類型。我聽說過很多關於IE的問題，所以當沒有什麼可見的時候，我驚慌失措。 –

嗯，我在Mac上，所以我不能檢查它，但它似乎塔如果您的HTML中沒有文檔類型，那麼IE可能會遇到麻煩，因爲他不知道如何解析代碼。

在第一行（甚至<html>之前-Tag寫：

<!DOCTYPE html>

這是一個HTML5文檔

編輯： ....編輯... 。忘記這一點。

來源

2012-05-15 19:45:28

你的編輯沒有意義。你有沒有看過所有四個位置設置爲零的元素？ –

不是，但主要是因爲我很難在桌面和移動環境中維護，因此我儘量避免絕對定位。 –

好的，刪除了編輯。真的沒有看到它，所以不知道有四個邊的定位是有用的。 –

包含元素的設置高度和寬度明確。我有一個類似的問題與我的舊網頁之一（在Firefox和Chrome工作得很好，去地獄IE）和我發現，在那個Firefox Chrome會自動設置包含元素的維度（如果沒有明確指定），然後將這些百分比作爲這些假設的基礎。 IE並沒有做出這樣的假設，所以當它看起來百分比時，它基本上是說「35％是什麼？」

來源

2012-05-15 20:13:18

CSS百分比在IE中完全失敗

回答

相關問題