当前位置: 首页 > 图文教程 > 网络编程 > ASP.NET > ASP.NET 2.0中CSS失效解决方案

ASP.NET
C# Quoted-Printable编码、解码
asp.net Google的translate工具翻译 API
.NET读取所有目录下文件正则匹配文本电子邮件
asp.net 半角全角转化工具
AjaxControlToolKit 显示浏览者本地语言的方法
asp.net HTML文件上传标签
ASP.NET 绑定DataSet中的多个表
ASP.NET 重定向的几种方法小结
Asp.Net 重定向必须要知道的一些资料
ASP.NET 导出到Excel时保留换行的代码
Asp.Net Cache缓存使用代码
document.getElementsByName和document.getElementById 在IE与FF中不同实现
GridView单元格合并
asp.net 大文件上传控件
asp.net 日期函数 某月的第一天和最后一天的日期
asp.net 时间类 一周的周一和周末的日期
C# javaScript函数的相互调用
asp.net membership 密码重设
"虚拟路径"..."映射到另一个应用程序,这是不允许的!
如何传值在2个页面之间 要求不刷新父页面,并且不能用Querystring传值

ASP.NET 2.0中CSS失效解决方案


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-08-14   浏览: 172 ::
收藏到网摘: n/a

经常有人遇到ASP.NET 2.0(ASP.NET 1.x中可能是有效的)中CSS失效的问题,现将主要原因和解决方法罗列如下:

1、CSS文件路径不正确

这个问题属于Web开发中的基础问题,一般采用相对路径会出现这样的问题,或者样式文件写在了模板页里面,在内容页与模板页不在同一级目录下时会出现这样的问题。此时你要清楚Web中相对路径的规则,如果你不清楚,可以采用绝对路径的写法试试就知道是不是路径的问题了。

2、CSS规则写法错误

这个问题谁也帮不你,只能自己学习CSS的相关知识了。

3、文件编码问题

有时候,CSS样式放在aspx文件里有效,而放在独立的文件中无效,这样的问题如果不是路径问题,则就是编码问题造成的,可以将CSS文件用记事本打开,再另存为ANSI格式或者UTF-8格式即可。

4、权限问题

这种情况常见的现象是登录之前样式无效,登录之后才有效,这是典型的权限问题造成的。由于web.config配置了所有文件不允许匿名访问,才会出现这样的问题,解决方法就是是标记将样式文件配置为允许匿名访问。例如:

5、单击按钮样式失效

这种情况最典型的原因是单击按钮事件里有类似Response.Write这样的语句,由于ASP.NET 2.0默认采用http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd文档类型定义,它就要求在<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">的前面不能有任何输出。这种问题的解决方法是采用ClientScriptManager输出,或者采用Literal控件输出内容。

6、在ASP.NET 1.x里面起作用的样式到ASP.NET 2.0里面失效

这种问题一般仍然是xhtml1造成的,由于http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd的样式规则与以前的不同,如要加单位,例如width:200;现在要写成width:200px;这种问题的解决方法就是要明确加上单位。

7、脚本设置的样式无效

由于xhtml1.DTD要求有单位,因此在设置对象样式的数值时,仍然要加上单位,如obj.style.width = "200px"。下面的代码在Firefox里是无效的(不要抱怨Firefox麻烦)

以下为引用的内容:

<!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>
<script type="text/javascript">
//<![CDATA[
function SetHeight()
{
document.getElementById("x").style.height="200"
}
//]]>
</script>
</head>
<body>
<div id="x" style="background:#DDD;height:auto;">测试</div>
<input type="button" value="设置" onclick="SetHeight()" />
</body>
</html>

尽管上面在IE中正常,但在Firefox里面则会出现问题。正确写法为:

以下为引用的内容:

document.getElementById("x").style.height="200px"