CSS - DIV中div中，IE

無背景色我在HTML這個簡單的佈局：CSS - DIV中div中，IE

<body> 
    <div class="container"> 
     <p class="title1">Title 1</p> 
     <div class="content"> 
      <p class="title2">Title 2</p> 
     </div> 
    </div> 
</body>

下面CSS：

body { 
    background-image:url(masthead.gif); 
    margin: 0; 
    padding: 0; 
} 

.container { 
    position:absolute; 
    width: 960px; 
    height:600px; 
    left: 50%; 
    margin-left: -480px; 
    margin-top: -300px; 
    top: 50%; 
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 
    border: 1px solid #81a1b7; 
    zoom: 100%; 
    background-color: rgba(117,161,180,0.5); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f75A1B4,endColorstr=#7f75A1B4); 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f75A1B4,endColorstr=#7f75A1B4)"; 
} 

.content { 
    background-color: rgba(255,255,255,0.8); 
    border-radius: 15px 15px 15px 15px; 
    padding: 10px 0; 
    margin: 15px; 
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 
    height: 500px; 
} 

.title1 { 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:20px; 
    color:#FFF; 
    margin-top: 15px; 
} 
.title2 { 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:18px; 
    color:#000; 
    margin-top: 0px; 
}

我期待看到一個白色背景並在裏面的「內容」div圓角...我得到了這個工作在Firefox和Chrome，但沒有在Internet Explorer中的背景顏色。我究竟做錯了什麼？

...查看JsFiddle

來源

2013-01-08 zenho99

在IE9上工作得很好。 –

IE8和更低的代碼不支持RGBA和邊界半徑。
因此.content {background-color: rgba(255,255,255,0.8);}將不會在這些瀏覽器中顯示任何東西：S

您將需要使用十六進制顏色或PNG代替。

來源

2013-01-08 18:32:36

這很奇怪......我在兩臺不同的PC上用IE9測試過它，它只是在第二臺上運行！那麼外部「容器」div的rgba背景顏色如何？它甚至在IE6中也適用於我！ – zenho99

確保兩種IE中的渲染模式都是IE9。（你可以在IE9中模擬IE8和IE7，也許在測試之後渲染留在其中之一）。這是您在外部「容器」div中看到的過濾器，而不是rgba。 –

你釘了它！第一個IE9處於兼容模式...非常感謝！ – zenho99

CSS - DIV中div中，IE

回答

相關問題