首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

没法设置不透明度

2013-04-20 
无法设置不透明度!我用的IE10,用visual studio2012开发,设置不透明度无效,是什么原因呢?!顺便问一下,我没

无法设置不透明度!
我用的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;
         }

热点排行