导致IE6不能正常解析CSS文件【CSS编码差异 】

2010/08/06 09:10  |  分类：Css

可能有些童鞋在做div+css网页设计的时候突然IE6不能正常解析CSS文件，解决半天也不得其解，其实这个问题我也是遇到过的。
　　如果网页采用了 UTF-8 编码格式，这本来没有问题，问题是外部 CSS 文件默认是 ANSI 编码，并没有保存为 UTF-8 格式。可能你会发现在一般情况下这样也是没有问题的，然而当 CSS 文件中包含有中文注释时就可能不尽如人意了！估计是 IE6 版本以下的浏览器在解析这个 CSS 文件时因为编码问题而无法正确解析，所以才会发生 CSS 在 IE6 下不起作用的情况。看来微软已注意到这个问题，在 IE7 中把它修复了。
　　但是用IE6 的人还是不少。因此这个问题需要解决：
　　方法一：把 CSS、JS 和网页文件都统一保存为 UTF-8 格式。
　　方法二：去掉 CSS、JS 中的中文注释，或者改为英文。
　　上文为IE6因为编码问题无法正确解析CSS文件
　　有时候我们发现我们写的html页面引用外部css文件的时候在IE7和FF中能够很好的被解析，即能正常显示，可在IE6中却完全没有被解析，即css文件里的样式根本没应用到我们的html页面，这是怎么回事？开始我把css文件里头的所有样式都复制粘贴到html页面中的

中，这样做以后，IE6、IE7、FF都能正常显示了，这也就说明外部的css文件应该是存在什么问题了，为什么在IE6中出现这问题，而在IE7和FF中却没有？网上google了下，发现是IE6中对页面的编码有严格的要求，我查看了下，朋友发过来的css文件用的编码是GB2312的，而html文件用的是utf-8的，原来问题就出在这里了，我把css文件内容的编码用ed改成utf-8，再次测试的时候，一切恢复正常了，还有就是我发现朋友的css文件里面用中文注释，严重建议朋友们不要在css文件里面用中文来注释，这样也会引起编码的问题。

标签：、 172 views  |  1条评论

css断行问题

2010/06/17 14:02  |  分类：Css

　对于前端开发的童鞋来说，自动换行是个问题，正常字符的换行是比较合理的，而连续的数字和英文字符常常将容器撑大，挺让人头疼，现在总结一下CSS如何实现换行的方法，只要在CSS中定义了如下句子，可保网页不会再被撑开了。

　　对于div,p等块级元素
　　正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行

　　
        html 
　　<div id=”wrap”>正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div>
　　css 
　　#wrap{white-space:normal; width:200px; }

　　对于IE浏览器：
　　连续的英文字符和阿拉伯数字,使用word-wrap: break-word ;或者word-break:break-all;实现强制断行

         html 
　　<div id=”wrap”>52sonen52sonen52sonen52sonen52sonen52sonen</div>
　　css 
　　#wrap{word-break:break-all; width:200px;}
　　或者 

　　#wrap{word-wrap:break-word; width:200px;}
　 对于Firefox浏览器：
　　连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条
　　html 
　　<div id=”wrap”>52sonen52sonen52sonen52sonen52sonen52sonen</div>
　　css 
　　#wrap{word-break:break-all; width:200px; overflow:auto;}

全文阅读 »

标签：、、、 409 views  |  2 条评论

DIVCSS要引起重视的10个问题

2010/05/14 11:16  |  分类：Css

一、检查HTML元素是否有拼写错误、是否忘记结束标记 
　　即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。 
二、检查CSS是否正确 
　　检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。 
三、确定错误发生的位置 
　　假如错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。 

全文阅读 »

标签：、、 257 views  |  发表评论

定位position和浮动float

2010/02/20 14:34  |  分类：Css

        CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。要知道，用户代理对 CSS2 中定位的支持远胜于对其它方面的支持，对此不应感到奇怪。
另一方面，CSS1 中首次提出了浮动，它以 Netscape 在 Web 发展初期增加的一个功能为基础。浮动不完全是定位，不过，它当然也不是正常流布局。我们会在后面的章节中明确浮动的含义。

一切皆为框

　　div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容 ，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。
　　您可以使用 display 属性 改变生成的框的类型。这意味着，通过将 display 属性设置为 block，可以让行内元素（比如

标签：、、、 281 views  |  发表评论

一张背景图的自适应按钮

2010/02/10 09:20  |  分类：Css

其实很多时候都是用到自适应，用的最多的也就是导航，按钮的。根据实际字数需要，扩展或者缩小宽度。

hmtl代码:

<span>
<button>确定充值，去网银付款</button>
</span>

css代码：

span {
 background:url(bg_comb.png) 100% 0;
 height:32px;
 display:inline-block;
 padding:0 5px 0 0;
 text-align:center;
 font-size:14px !important;
 vertical-align:middle;
 width:auto;
}
button {
 display:inline-block;
 border:0;
 background:url(bg_comb.png) 0 0;
 height:32px;
 line-height:30px;
 padding:0 10px 5px 15px;
 color:#fff;
 vertical-align:middle;
 white-space:nowrap;
 overflow:visible;
}

其实我也是个懒人，这里不给出图片和预览了，如果又需要的。可以自己按照样式，亲自测试下。

标签：、、 376 views  |  发表评论

[CSS]贴在底部的布局

2009/12/03 16:00  |  分类：Css

对于前端开发人员来说，页脚的处理时常让我们比较头痛。因为，如果页面比较长还好说，如果页面比较短，则页脚则会跑到页面的中间部位，十分的不雅观。

那么有什么办法能让页脚乖乖的出现在每页的最下方呢？方法当然是有的，一种是使用js+css的方法,这种办法比较好理解，实现也比较的简单，这也是大家用的比较多的办法。但是，如果用户禁用了js，那么这种方法自然也就不再能够实现。那我们自然的想到了使用纯css。

 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“> 
<html  xmlns=”http://www.w3.org/1999/xhtml“> 
<head> 
<title>我个是非常好的小页脚</title> 
<meta http-equiv=”Content-Type” content=”text/html” charset=”utf-8″    /> 
<style type=”text/css”> 
html{height:100%;overflow:auto;}  
body{margin:0;padding:0;position:relative;height:auto !important;height:100%;min-height:100%;text-align:center;}  
.main{border-bottom:60px solid #fff;}  
#footer{position:absolute;width:100%;clear:both;height:25px;border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;margin-top:20px;bottom:0;left:0;}  
</style> 
</head> 

全文阅读 »

标签：、、 366 views  |  发表评论

CSS样式表的优化技巧

2009/11/09 17:40  |  分类：Css

一、使用css缩写

　　使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》，这里就不展开描述。

　　二.明确定义单位，除非值为0

　　忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100，但是在CSS中，你必须给一个准确的单位，比如:width:100px width:100em。只有两个例外情况可以不定义单位:行高和0值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。

　　三.区分大小写

　　当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。

　　class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。

　　四.取消class和id前的元素限定

　　当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，鴆las s可以在页面中多次使用。你限定某个元素毫无意义。例如:
全文阅读 »

标签：、 362 views  |  发表评论

汇总IE8以及其他的浏览器兼容hack

2009/10/20 18:13  |  分类：Css

网上很多，这类的兼容问题的汇总.
#box{
color:red; /* 所有浏览器都支持 */
color:red !important;/* Firefox、IE7支持 */
_color:red; /* IE6支持 */
*color:red; /* IE6、IE7支持 */
*+color:red; /* IE7支持 */
color:red\9; /* IE6、IE7、IE8支持 */
color:red\0; /* IE8支持 */
}

标签：、、、 332 views  |  发表评论

总结：css布局常犯的9中错误

2009/10/19 10:17  |  分类：Css

对于初学的同学来说会遇到的问题肯定会不少，当然问题也是五花八门，这里大概总结了几种常见的出现错误的地方，还有排除错误的简单的方法：
1. 检查HTML元素是否有拼写错误、是否忘记结束标记
　 即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。

2. 检查CSS是否书写正确
　 检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。

全文阅读 »

标签：、、 259 views  |  发表评论

ie 和ff对css的缩写都存在的问题

2009/10/14 11:15  |  分类：Css

1. 在IE里用body {text-align: center;}就可以居中对齐.到了firefox里总是在左边.但是如果加了float: right;还能到右边就是不能到中间..FF下面设置容器的左右外补丁为auto就可以了，如: margin:0 auto;
2. 是 ie对于css的magin padding 等默认值为0px，但ff却不一样，为了保持外观的统一性，即使padding为0你也要写上，以免ff在浏览中的错位。
3. 对css缩写的支持问题：不论是ie 还是ff对css的缩写都有一小点问题,比如:border: 0xp solid #fff;两个浏览器支持都没有问题,但如果四个边的magin不同情况下，就不能用这种缩写了，无论是ie还是ff又会出现边界解释错误，而导致页面变形
全文阅读 »

标签：、、 382 views  |  发表评论
Pages: 1 2 3 4 5 6 7 8 Next


©2008 容我织梦 All Rights Reservied

Powered by WordPress. Theme by Prower

京ICP备09041474号  迅雷统计