救命啊，在asp.net显目中导入DIV+CSS 的框架页面布局全乱了要如何解决啊
日期：2014-05-18 浏览次数：20377 次
救命啊，在asp.net显目中导入DIV+CSS 的框架页面布局全乱了要怎么解决啊？
在 DW 中做好的 DIV+CSS 页面，在 IE6，IE7，FireFox，opera 浏览器中都显示正常。
可是导入到 asp.net 中。 IE6 显示就全乱了。 那些层根本不浮动了。
IE7，和 FireFox 就全部正常。 望高手指点下。 谢谢。
我也是刚尝试使用DIV+CSS 布局。
------解决方案--------------------
我的那个问题找到原因了，是因为页面用的UTF-8编码，而css文件用的是GB2312，而且css中有中文的注释，这样在IE6下就有问题了。
不过有一些效果确定在IE6 IE7 和 FF下显示的不同，这样就要用不同的CSS定义。
http://www.arcbox.cn/zblog/post/36.html
摘：
CSS兼容IE6,IE7,FIREFOX的一些收集第一种，是CSS HACK的方法
height:20px; /*For Firefox*/
*height:25px; /*For IE7 & IE6*/
_height:20px; /*For IE6*/
注意顺序。
这样也属于CSS HACK，不过没有上面这样简洁。
#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */
第二种是使用IE专用的条件注释
<!--其他浏览器 -->
<link rel= "stylesheet " type= "text/css " href= "css.css " />
<!--[if IE 7]>
<!-- 适合于IE7 -->
<link rel= "stylesheet " type= "text/css " href= "ie7.css " />
<![endif]-->
<!--[if lte IE 6]>
<!-- 适合于IE6及一下 -->
<link rel= "stylesheet " type= "text/css " href= "ie.css " />
<![endif]-->
第三种css filter的办法，以下为经典从国外网站翻译过来的。.
新建一个css样式如下：
#item {
width: 200px;
height: 200px;
background: red;
}
新建一个div,并使用前面定义的css的样式：
<div id= "item "> some text here </div>
在body表现这里加入lang属性,中文为zh：
<body lang= "en ">
现在对div元素再定义一个样式：
*:lang(en) #item{
background:green !important;
}
这样做是为了用!important覆盖原来的css样式,由于:lang选择器ie7.0并不支持,所以对这句话不会有任何作用,于是也达到了ie6.0下同样的效果,但是很不幸地的是,safari同样不支持此属性,所以需要加入以下css样式：
#item:empty {
background: green !important
}
:empty选择器为css3的规范,尽管safari并不支持此规范,但是还是会选择此元素,不管是否此元素存在,现在绿色会现在在除ie各版本以外的浏览器上。
对IE6和FF的兼容可以考虑以前的!important
个人比较喜欢用第一种，简洁，兼容性比较好。
在 DW 中做好的 DIV+CSS 页面，在 IE6，IE7，FireFox，opera 浏览器中都显示正常。
可是导入到 asp.net 中。 IE6 显示就全乱了。 那些层根本不浮动了。
IE7，和 FireFox 就全部正常。 望高手指点下。 谢谢。
我也是刚尝试使用DIV+CSS 布局。
------解决方案--------------------
我的那个问题找到原因了，是因为页面用的UTF-8编码，而css文件用的是GB2312，而且css中有中文的注释，这样在IE6下就有问题了。
不过有一些效果确定在IE6 IE7 和 FF下显示的不同，这样就要用不同的CSS定义。
http://www.arcbox.cn/zblog/post/36.html
摘：
CSS兼容IE6,IE7,FIREFOX的一些收集第一种，是CSS HACK的方法
height:20px; /*For Firefox*/
*height:25px; /*For IE7 & IE6*/
_height:20px; /*For IE6*/
注意顺序。
这样也属于CSS HACK，不过没有上面这样简洁。
#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */
第二种是使用IE专用的条件注释
<!--其他浏览器 -->
<link rel= "stylesheet " type= "text/css " href= "css.css " />
<!--[if IE 7]>
<!-- 适合于IE7 -->
<link rel= "stylesheet " type= "text/css " href= "ie7.css " />
<![endif]-->
<!--[if lte IE 6]>
<!-- 适合于IE6及一下 -->
<link rel= "stylesheet " type= "text/css " href= "ie.css " />
<![endif]-->
第三种css filter的办法，以下为经典从国外网站翻译过来的。.
新建一个css样式如下：
#item {
width: 200px;
height: 200px;
background: red;
}
新建一个div,并使用前面定义的css的样式：
<div id= "item "> some text here </div>
在body表现这里加入lang属性,中文为zh：
<body lang= "en ">
现在对div元素再定义一个样式：
*:lang(en) #item{
background:green !important;
}
这样做是为了用!important覆盖原来的css样式,由于:lang选择器ie7.0并不支持,所以对这句话不会有任何作用,于是也达到了ie6.0下同样的效果,但是很不幸地的是,safari同样不支持此属性,所以需要加入以下css样式：
#item:empty {
background: green !important
}
:empty选择器为css3的规范,尽管safari并不支持此规范,但是还是会选择此元素,不管是否此元素存在,现在绿色会现在在除ie各版本以外的浏览器上。
对IE6和FF的兼容可以考虑以前的!important
个人比较喜欢用第一种，简洁，兼容性比较好。
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
