Internet Explorer瀏覽器正在處理我的代碼非常奇怪

-1

將以下代碼嵌入到桌面上的基本test.html文件中。使用谷歌瀏覽器，Firefox和Internet Explorer運行。Internet Explorer瀏覽器正在處理我的代碼非常奇怪

它無法在IE中工作！

我看不出爲什麼這段代碼會出現故障。如果你知道爲什麼請嘗試解決這個問題。有沒有一些與命令不兼容的CSS命令，或者我需要針對特定的瀏覽器與特定的代碼...（我不喜歡這樣做）。

<html> 
<head> 

<style> 

html, body { 
    height: 100%; 
    margin: 0; 
    background: #A3A3A3; 
    background-image: linear-gradient(180deg, #7D7D7D, #7D7D7D 80px, transparent 87px, transparent 140%); 
    background-repeat: no-repeat; 
} 
#maincontainer { 
    min-height: 100%; 
    width: 942px; 
    min-width: 600px; 
    margin: auto; 
    border: ridge; 
    border-color: #919191; 
    border-top: 0; 
    border-bottom: 0; 
    background: rgba(255,255,255,0.35); 
    padding-left: 16px; 
    padding-right: 16px; 
} 

</style> 

</head> 

<body> 

<div id="maincontainer"> 


</div> 

</body> 
</html>

來源

2013-07-08 Name Duded

如果HTML/CSS將在任何地方失敗，它將在IE中失敗。這對任何人都不足爲奇。沒有具體說明，很可能您需要修改某些內容，或者作爲IE的替代方案，或者適用於所有瀏覽器的不同方法。 – 2013-07-08 04:27:45

我沒有時間在幾個瀏覽器中設置頁面來確定一些非特定問題。編輯您的問題以包含更多信息。從IE版本失敗開始，描述應該發生什麼，什麼不發生。然後，也許，有人會採取更詳細的外觀。 – 2013-07-08 04:37:08

哪個版本的IE？自IE9開始支持['rgba（）']（http://caniuse.com/#feat=css3-colors），['linear-gradient（）']（http://caniuse.com/#feat=自IE10開始支持css-gradients）。 – Passerby

要回答你的問題，RGBA的一部分作爲背景顏色是不是在IE8和更早版本的支持。我就遇到了這個問題而回，並用這個背景色爲RGBA支持IE一起：

filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7FFFFFFF', EndColorStr='#7FFFFFFF');

「7FFFFFFF」 - 前兩個字符是透明量，最後的6色。所有十六進制

更多關於梯度IE瀏覽器的信息可以在這裏找到：http://msdn.microsoft.com/en-us/library/ms532997%28v=vs.85%29.aspx

希望這有助於

來源

2013-07-08 05:08:20 96ethanh

我在哪裏插入此代碼？它似乎打破了設計。另外....只是把它放在那裏，但即兼容性觀點似乎使它的工作。 –

似乎很多人正在從CSS路程，正在向SVG的梯度。

如果採取這種代碼粘貼到記事本，並命名爲：bkg.svg

<?xml version="1.0" ?> 
    <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" version="1.0" width="100%" height="100%" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <defs> 
    <linearGradient id="myLinearGradient1" 
        x1="0%" y1="0%" 
        x2="0%" y2="100%" 
        spreadMethod="pad"> 
     <stop offset="0%" stop-color="#7D7D7D" stop-opacity="1"/> 
     <stop offset=".92" stop-color="#7D7D7D" stop-opacity="1"/> 
     <stop offset="100%" stop-color="#0D0D0D" stop-opacity=".0"/> 
    </linearGradient> 
    </defs> 

    <rect width="100%" height="87px" 
    style="fill:url(#myLinearGradient1);" /> 
</svg>

，你的HTML應該是這樣的：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
<html> 
<head> 
    <style type="text/css"> 

    html, body { 
     height: 100%; 
     margin: 0; 
     background: #A3A3A3; 
     background-image: url("svg-gradient.svg"); 
     background-repeat: no-repeat; 
    } 

    #maincontainer { 
     min-height: 100%; 
     width: 942px; 
     min-width: 600px; 
     margin: auto; 
     border: ridge; 
     border-color: #919191; 
     border-top: 0; 
     border-bottom: 0; 
     background: rgba(255,255,255,0.35); 
     padding-left: 16px; 
     padding-right: 16px; 
    } 

    </style> 
    <title></title> 
</head> 
<body> 
    <div id="maincontainer"></div> 
</body> 
</html>

這給了我你要找的結果在鉻，火狐和IE9。

參考： css-gradients-for-ie9

來源

2013-07-08 05:43:54 ObieMD5

這不以任何方式創建我正在尋找的三列。 –

我的解決方案不能給你什麼？如果你看看這個[圖片]（http://i.imgur.com/vsXJPl6.png），你的版本是最上面的，我的是最底層的，除了一些顏色調整之外，它是一樣的。 – ObieMD5

通過這個我的意思是，它創建了三列，但不是頂部欄漸變，減輕了內部。嘗試在Chrome中運行我的代碼，你會看到。 –

在您的文檔，以確定它作爲一個標準模式文檔的頂部添加<!doctype html>。使用F12開發工具確保您的頁面未在兼容模式下運行。

來源

2013-07-08 17:25:14 EricLaw

NOOOPE！這隻能修正它的一個問題（我忘了將它包含在任務中）。我實際上已經在實際的腳本中使用了文檔類型。我可以告訴你沒有自己編寫代碼，因爲你會知道答案要複雜得多。 –

Internet Explorer瀏覽器正在處理我的代碼非常奇怪

回答

相關問題