相容IE Firefox的背景半透明內容不透明設定

首先要說明的是背景是內容的祖先元素。如果是兄弟節點那就沒有必要記錄這篇文章了。

記錄一下，知其然也知其所以然。

ie8-特點：

1.不支援"opcity:0.5;"這種寫法，只支援"filter:alpha(opacity=50)"。

2.如果背景元素擁有css屬性設定了z-index的值（除預設值auto外),則內容會隨著背景元素一起半透明

3.如果背景元素的內容元素本身或其祖先節點（這些祖先節點是背景元素的後代節點）沒有設定css定位屬性position:relative/absolute/fixed。則內容也會隨著背景元素一起半透明。

4.支援"background：rgb(0,0,0)"設定背景顏色，但是不支援「background：rgba(0,0,0,0.5)」這種設定背景顏色的同事設定半透明的方式。

ie9+、chrome、firefox特點：

1.支援"opacity:0.5",但是內容會隨背景一起半透明

1.支援「background：rgba(0,0,0,0.5)」這種設定背景顏色的同事設定背景半透明但內容不透明的方式。

2.如果同事使用opacity=0.5和rgba不透明度為0.5，那麼效果是在元素為opacity所設定的不透明度的情況下背景再次按rgba的方式半透明。最終背景的半透明度為opacity*rgba=0.5*0.5=0.25。

ie9+還有乙個特點就是同時支援opcity:0.5和"filter:alpha(opacity=50)"這種方式。所以rgba和filter一起用會出現第三項的情況。

所以綜合上述的瀏覽器特點，相容所有瀏覽器的方案是背景元素設定樣式為

/*不能設定z-index,根據情況設定需要的background的顏色,chrome/firefox中第一句起作用；ie中後兩句起作用*/

.background

內容元素的樣式為

/*可以設定元素或其祖先節點為定位樣式relative/absolute/fixed*/

.content

doctype html

>
<
html 
lang
="ch-cn"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
style 
type
="text/css"
>
html,body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td*/*
不能設定z-index,根據情況設定需要的background的顏色,chrome/firefox中第一句起作用；ie中後兩句起作用
*/.background
/*可以設定元素或其祖先節點為定位樣式relative/absolute/fixed
*/.content
style
>
head
>
<
body
>
<
div 
style
="width:50px;height:50px;border:1px solid;background: red;"
>
div>
<
div 
class
="background"
style
="width: 200px;height: 200px;"
>
<
div 
class
="content"
style
="width: 50px;height:50px;background: red;"
>
div>
div>
html
>

相容ie,firefox的callback方法

function callback args,datasxmldoc common showmonthreport.xsl try catch e 相容ie,firefox的callback方法，這是乙個xsl解晰xml得到 html字串的方法。quote 引數說明 datasxmldoc 為 xm...

CSS相容IE Firefox要點

首先我們說說firefox和ie對css的寬度顯示有什麼不同 其實css width 指的是標準css中所指的width的寬度，在firefox中的寬度就是這個寬度。它只包含容器中內容的寬度。而internet explorer width 則是指整個容器的寬度，包括內容，padding borde...

IE FireFox相容 JS對select操作

今天在ajax中使用兩個下拉框動態新增select中的options,當我在ie測試下正常使用卻在firefox中不能正常使用，我對指令碼也不是很熟悉，所以上網查了一下發現他們在動態新增option時有點不同。下面把他記下來，說不定以後還可以用用 動態刪除select中的所有options func...