为何这个样式在asp.net中不行
日期：2014-05-17 浏览次数：20402 次
为啥这个样式在asp.net中不行？
放到aspx文件中后，阴影和圆角都没了，为啥呢？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0px; padding:0px;}
#div{
width:250px;
border:1px solid cdd9e8;
background:#d2e0f1;
font-size:12px;
position:absolute;
left:229px;
top:62px;
height: 300px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:5px;
border:1px solid ddd;
-webkit-box-shadow:0 0 10px black;
-moz-box-shadow:0 0 10px black;
padding:2px;
}
#div h2{ margin:1px; padding-left:15px; height:20px; line-height:20px; font-size:13px; font-
weight:100; background:#d2e0f1; cursor:move}
#div .content{ position:absolute; left:8px; top:28px;width:236px;height:264px; line-
height:10px;background:#eeeeee;border:1px solid #006699; }
#div .close{ display:block; position:absolute; right:10px; top:4px; line-height:22px; text-
decoration:none; color:#0000}
</style>
<script type="text/javascript">
function drag(obj,e){
var e=e ? e : event;
var mouse_left=e.clientX-obj.offsetLeft;
var mouse_top=e.clientY-obj.offsetTop;
var docmousemove=document.onmousemove;
var docmouseup=document.onmouseup;
document.onselectstart=function(e){return false}
document.onmouseup=function(){
document.onmousemove=docmousemove;
document.onmouseup=docmouseup;
document.onselectstart=function(e){return true}
}
document.onmousemove=function(ev){
var ev=ev ? ev : event;
if(ev.clientX-mouse_left>0&&document.documentElement.clientWidth-(ev.clientX-
mouse_left)-obj.offsetWidth+document.documentElement.scrollLeft>0){
obj.style.left=(ev.clientX-mouse_left)+"px";
}
if(ev.clientY-mouse_top>0&&document.documentElement.clientHeight-(ev.clientY-
mouse_top)-obj.offsetHeight+document.documentElement.scrollTop>0){
obj.style.top=(ev.clientY-mouse_top)+"px";
}
}
}
function opentj()
{
eval("div.style.display='block'");
}
</script>
</head>
<body>
<div id="div" >
<h2 onmousedown="drag(this.parentNode,event)">添加设备<a href="javascript:"
onclick="document.getElementById('div').style.display='none'" class="close"><img src="gb.gif"
width="15" height="15" /></a></h2>
<div class="content">
<p>提示内容</p>
<div style=" text-align:center"></div>
</div>
</div>
</body>
</html>
------解决方案--------------------
代码完全一样吗？
如果一样，跟代码没关系的
尤其是
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
是一样的吗，这个是关键
------解决方案--------------------
完全一致不可能是不同效果的，唯一的差别可能是编码的问题。
你可以
content="text/html; charset=utf-8"
改成
content="text/html; charset=gb2312"
再尝试
放到aspx文件中后，阴影和圆角都没了，为啥呢？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0px; padding:0px;}
#div{
width:250px;
border:1px solid cdd9e8;
background:#d2e0f1;
font-size:12px;
position:absolute;
left:229px;
top:62px;
height: 300px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:5px;
border:1px solid ddd;
-webkit-box-shadow:0 0 10px black;
-moz-box-shadow:0 0 10px black;
padding:2px;
}
#div h2{ margin:1px; padding-left:15px; height:20px; line-height:20px; font-size:13px; font-
weight:100; background:#d2e0f1; cursor:move}
#div .content{ position:absolute; left:8px; top:28px;width:236px;height:264px; line-
height:10px;background:#eeeeee;border:1px solid #006699; }
#div .close{ display:block; position:absolute; right:10px; top:4px; line-height:22px; text-
decoration:none; color:#0000}
</style>
<script type="text/javascript">
function drag(obj,e){
var e=e ? e : event;
var mouse_left=e.clientX-obj.offsetLeft;
var mouse_top=e.clientY-obj.offsetTop;
var docmousemove=document.onmousemove;
var docmouseup=document.onmouseup;
document.onselectstart=function(e){return false}
document.onmouseup=function(){
document.onmousemove=docmousemove;
document.onmouseup=docmouseup;
document.onselectstart=function(e){return true}
}
document.onmousemove=function(ev){
var ev=ev ? ev : event;
if(ev.clientX-mouse_left>0&&document.documentElement.clientWidth-(ev.clientX-
mouse_left)-obj.offsetWidth+document.documentElement.scrollLeft>0){
obj.style.left=(ev.clientX-mouse_left)+"px";
}
if(ev.clientY-mouse_top>0&&document.documentElement.clientHeight-(ev.clientY-
mouse_top)-obj.offsetHeight+document.documentElement.scrollTop>0){
obj.style.top=(ev.clientY-mouse_top)+"px";
}
}
}
function opentj()
{
eval("div.style.display='block'");
}
</script>
</head>
<body>
<div id="div" >
<h2 onmousedown="drag(this.parentNode,event)">添加设备<a href="javascript:"
onclick="document.getElementById('div').style.display='none'" class="close"><img src="gb.gif"
width="15" height="15" /></a></h2>
<div class="content">
<p>提示内容</p>
<div style=" text-align:center"></div>
</div>
</div>
</body>
</html>
------解决方案--------------------
代码完全一样吗？
如果一样，跟代码没关系的
尤其是
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
是一样的吗，这个是关键
------解决方案--------------------
完全一致不可能是不同效果的，唯一的差别可能是编码的问题。
你可以
content="text/html; charset=utf-8"
改成
content="text/html; charset=gb2312"
再尝试
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
