无法设置不透明度!
我用的IE10,用visual studio2012开发,设置不透明度无效,是什么原因呢?!
顺便问一下,我没有加文档规范<!doctype..>,因为加了之后javascript就无效了,可能我的这种书写格式不符规范,请问哪里有规范可以学习呢?
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test2.aspx.cs" Inherits="test2" %>
<html style="height:100%" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>利用层实现伪模式窗口</title>
<script type="text/javascript">
function show() {
div1.style.display = "inline";
div2.style.display = "inline";
div1.style.width = body.clientWidth;
div1.style.height = body.clientHeight;
div2.style.top = body.clientHeight / 2 - div2.clientHeight / 2;
div2.style.left = body.clientWidth / 2 - div2.clientWidth / 2;
}
function closea() {
div1.style.display = "none";
div2.style.display = "none";
}
</script>
<style type="text/css">
.div1 {
background-color:#fff;
display:none;
position:absolute;
top:0;
left:0;
z-index:1;
filter:alpha(opacity =50);
border:4px inset red;
}
.div2 {
border:3px inset blue;
display:none;
position:absolute;
width:300px;
height:200px;
z-index:2;
background-color:#9999CC;/*背景色*/
}
</style>
</head>
<body id="body" style="width:100%;height:100%">
<form id="form1" runat="server">
<input type="button" value="弹出" onclick="show()" />
<div id ="div1" class="div1"></div>
<div id="div2" class="div2">
<h1>你好</h1>
<input type="button" value="关闭" onclick="closea()" />
</div>
</form>
</body>
</html>
[解决办法]
第一行必须添加dtd声明,没有dtd的结果就是ie6,7,8,9以ie5的方式来渲染页面,就是ie7,8,9里边的f12打开后 文档模式下的quirks模式。这个模式会造成css盒模型计算错误,margin:0 auto; 不能居中。还有部分js生效。
dtd必须是页面的第一行出现。
xhtml-dtd:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
html5-dtd:
<!DOCTYPE html>
js生效的原因是没有正确的获取 dom元素。获取窗口大小也有兼容性问题:
var oDiv1 = document.getElementById('div1');
function viewSize(){
var doc = document,
de = doc.documentElement;
return {
'width': (window.innerWidth
[解决办法]
(de && de.clientWidth)
[解决办法]
doc.body.clientWidth),
'height': (window.innerHeight
[解决办法]
(de && de.clientHeight)
[解决办法]
doc.body.clientHeight)
};
}
规范这个东西很乱,w3c一套,厂商一套,基本都是以浏览器为主。
http://zh.wikipedia.org/wiki/HTML
[解决办法]
.div1 {
background-color:#fff;
display:none;
position:absolute;
top:0;
left:0;
z-index:1;
filter:alpha(opacity =50);
opacity:0.5;
border:4px inset red;
}