<![CDATA[志文工作室 - 计算机技术学习博客 - 网站建设]]> http://www.zhiwenweb.cn/ zh-cn PBlog2 v2.4 志文工作室 - 计算机技术学习博客 http://www.zhiwenweb.cn/images/logos.gif http://www.zhiwenweb.cn/ 志文工作室 - 计算机技术学习博客 http://www.zhiwenweb.cn/article.asp?id=1204 <![CDATA[外部调用js失效或乱码：JavaScript脚本改为外部引用后失效或出现乱码的原因与解决方法]]> lzwy0820@qq.com(任侠) Wed,11 Aug 2010 18:22:11 +0800 http://www.zhiwenweb.cn/default.asp?id=1204 为了网站页面的“瘦身”，于是将一些通用的代码放进js里面，然后就总是出现了问题。下面是通过反复调试得到的原因与解决方案，在此记录一下以供参考交流。

问题描述

JavaScript代码放在网页页面时，功能效果是正常的。但是当放在脚本里然后引用进来时，功能就失效了。

例如

网页里代码如下：
<script type="text/javascript">
    function nTabs(tabObj, obj) {
        var tabList = document.getElementById(tabObj).getElementsByTagName("li");
        for (i = 0; i < tabList.length; i++) {
            if (tabList[i].id == obj.id) {
                document.getElementById(tabObj + "_Title" + i).className = "active";
                document.getElementById(tabObj + "_Content" + i).style.display = "block";
            } else {
                document.getElementById(tabObj + "_Title" + i).className = "normal";
                document.getElementById(tabObj + "_Content" + i).style.display = "none";
            }
        }
    }
</script>

但是当保存为tab.js,然后如下方式引用时，就没有效果了
<script language='javascript' src='tab.js'>

原因与解决方案

其实这里可能有两个可能的原因：

一个是当你把这段代码放到网页的后面时，就会发现功能有效了。
这里放在后面是因为存在一个document ready 的问题。
从网络打开html文档总是有一个延迟的问题，在运行你的script程序的时候，文档可能没有完全加载。

第二个可能就是编码的问题。如果你测试一下，在你的脚本文件（如tab.js）里输出一段文字，如加入代码：

document.writeln("志文工作室");

然后再刷新网页，如果没有正常出现文字，而是出现了乱码，那么就应该是编码的问题。这里你可以用网页编辑工具如dreamweaver、editplus等新建js文件，然后复制进代码，问题即可解决。

]]> http://www.zhiwenweb.cn/article.asp?id=1191 <![CDATA[基于jQuery.Lazyload 为网站（PJblog）添加当鼠标滑到当前屏时图片渐隐载入显示效果]]> lzwy0820@qq.com(任侠) Thu,24 Jun 2010 14:17:23 +0800 http://www.zhiwenweb.cn/default.asp?id=1191 在浏览很多博客特别是WordPress类的博客的时候，经常能看到那种当鼠标滚动到图片位置时，图片才渐隐显示出来的效果，一直感觉都很不错。因为这个效果体验很好，而且在加载速度等方面也很不错。
刚在一个博客（自力博客）里看到该效果的wp添加方法，发现该效果其实可以添加到任何网站上的，于是就将其用在本博客上了。具体效果可以参看下面的实例图片。下面说一下在网站上添加该效果的方法。

一、特效优点

1、加速站点的页面载入速度；
2、不唐突的图片渐显方式；
3、代码精简，便于操作维护，JS代码仅仅 1.6KB  先决条件是：你的站加载了 Jquery.js

二、原理：

能判断访客是不是在查看当前图片，若非，则加载 预留的填充图片 fill.gif ，等访客滑动鼠标滑轮或浏览到图片位置时，真正的图片地址才回加载。
不用用担心对访客的有好程度，这个效果会在图片即将被浏览到的时候就开始加载图片。

三、特效缺点

有一个，是关于img，height限定的问题，即当没有设置img的宽度和高度时，默认显示的fill.gif图片因为太小而看不到图片位置。不过你可以自己设计一个小但是图片稍大的图片来代替fill.gif。

四、实现方法

1、下载 jquery.lazyload.js和fill.gif文件，这里提供下载：点击下载此文件

2、将上面下载到的文件放到网站根目录，或者自定义一个位置（注意如果修改的话，后面引用这些文件时的路径也要同时修改）
pjblog的话放到根目录即可，会覆盖进插件的目录里

3、网页的头部（即<head></head>部分）中适当位置添加下面的代码。
pjblog添加在header.asp文件里即可，全静态则应添加在Template/static.htm文件里。
注意：红色部分可以限定只对文章中特定标签内的img生效，比如修改成 $(".content img")等。

    <script type=text/javascript>// <![CDATA[
    jQuery(document).ready(
    function($){
    $("img").lazyload({
         placeholder : "/Plugins/jQueryLazyload/fill.gif",
         effect      : "fadeIn"
    });
    });
    // ]]></script>

效果预览（往下滚动鼠标，N多图片示例）：

 

 

 

 

 

 

 

]]> http://www.zhiwenweb.cn/article.asp?id=1189 <![CDATA[pjblog352版本文章内JavaScript等脚本无法正常显示之临时解决办法]]> lzwy0820@qq.com(任侠) Sat,19 Jun 2010 20:48:00 +0800 http://www.zhiwenweb.cn/default.asp?id=1189  pjblog352版本可能是出于过滤危险脚本的原因，在提交的文章以及描述、标签等内容里，当包含JavaScript、script、VBScript等关键字时，一律会将其中的字母p替换为#112; ，所以会导致文章内容不能正常显示。

临时解决方法（修改后可能有未知安全风险，不过咱小博客一般无需考虑过多）：

打开文件：common/function.asp，查找如下代码（应该是在170行）：

   re.Pattern = "(java)(script)"
   Str = re.Replace(Str, "$1scri&#112;t")
   re.Pattern = "(j)(script)"
   Str = re.Replace(Str, "$1scri&#112;t")
   re.Pattern = "(vb)(script)"
   Str = re.Replace(Str, "$1scri&#112;t")

将之注释掉，即修改为如下代码：

' re.Pattern = "(java)(script)"
'   Str = re.Replace(Str, "$1scri&#112;t")
' re.Pattern = "(j)(script)"
'   Str = re.Replace(Str, "$1scri&#112;t")
' re.Pattern = "(vb)(script)"
'   Str = re.Replace(Str, "$1scri&#112;t")

 修改后插入脚本的示例：

QQ强制聊天代码脚本

<script type=text/javascript>
function StartQQMSG()
{
    var QNUM=document.getElementById('QQNum').value;
    if(QNUM==""){
        alert("请输入QQ号码");
        document.getElementById('QQNum').focus();
    }else{
        document.getElementById('QHTML').innerHTML='<a target="blank" href="tencent://message/?Menu=yes&uin='+QNUM+'&Service=300&sigT=45a1e5847943b64c6ff3990f8a9e644d2b31356cb0b4ac6b24663a3c8dd0f8aa12a595b1714f9d45"><img border="0" src=http://wpa.qq.com/pa?p=4:'+QNUM+':41 alt="点击这里给我发消息" height=16 align="absmiddle" />对话</a>';
    }
    return false;
}
</script>
<div style="border-right: #f3f3f3 1px dashed; padding-right: 10px; border-top: #f3f3f3 1px dashed; padding-left: 10px; padding-bottom: 10px; border-left: #f3f3f3 1px dashed; padding-top: 10px; border-bottom: #f3f3f3 1px dashed; height: 50px; text-align: center"><input class="qinput" id="QQNum" maxlength="10" size="10" type="text" /> <input class="qsubmit" type="button" align="absMiddle" onclick="StartQQMSG()" value="QQ对话" /><span id="QHTML">QQ在线</span></div>
     <br/>

 

]]> http://www.zhiwenweb.cn/article.asp?id=1183 <![CDATA[复活我的dutory博客ASP.NET学习笔记]]> lzwy0820@qq.com(任侠) Tue,08 Jun 2010 14:30:54 +0800 http://www.zhiwenweb.cn/default.asp?id=1183  用z-blog的朋友是否记得dutory? 这个在z-blog论坛发布的ASP.NET博客程序，最开始发布时志文工作室就在关注，因为那时开始学习ASP.NET课程。当时用该程序建立了ASP.NET学习笔记博客，不过后来这门课程学习完了，也没怎么继续深入了。

去年准备考研的时候，博客就基本了停止更新，这个ASP.NET学习笔记的博客也没有继续更新了。之后博客更换空间，由于新的USA空间开始不支持asp.net，就去掉了它。后来也因为时间的原因实际上放弃了ASP.NET的继续学习，也就一直没有管它了。

昨天在z-blog论坛转悠，再次看到Dutory的大名，兴致所致，就让它“复活”了。至于以后会怎么处理它，暂时还没想好，现在就先让它活着吧。

dutory的功能实际上确实挺不错的，只是技术支持开发过于“低调”，开发进度也很慢，以至于使用的人很少。我这个，暂且当做Dutory为数不多的博客给大家一个参考的例子吧

 博客地址：http://www.zhiwenweb.cn/aspx/  ，有兴趣的可以去围观一下

]]> http://www.zhiwenweb.cn/article.asp?id=1171 <![CDATA[pjblog修改评论留言楼层设置与评论审核状态关闭时评论审核状态通过]]> lzwy0820@qq.com(任侠) Sun,16 May 2010 22:58:39 +0800 http://www.zhiwenweb.cn/default.asp?id=1171 pjblog4一直处于难产状态中，虽然说是在内测组内，但从未获得一点有用的信息，所以不再保持高度的期待状态了，好好打点下pj352，也足够使用需求了。

下午进行了两处的功能修改，一个为：默认评论时，不管是否开启评论审核，评论审核状态一直默认为未审核，这样当打开审核时，原来显示的评论也看不到了。另一个为：为了互动性，设置评论留言者的楼层设置，一来方便查阅，二来增加互动性乐趣。

这里发布修改方法，一方面供自己备份查询，另一方面给同用352版本的pjer作为参考。其他pj版本可参考修改。此修改在半静态下进行。

1、评论审核打开时，发表评论自动审核通过
方法：
打开文件blogcomm.asp，查找代码：
 

Post_WebSite = Trim(CheckStr(request.Form("WebSite")))

在其下面添加：
 

'评论非审核状态则自动审核通过所有评论
 dim Post_IsAudit
 If blog_AuditOpen Then Post_IsAudit=False Else Post_IsAudit=True

查找代码：
 

    AddComm = Array(Array("blog_ID", post_logID), Array("comm_Content", post_Message), Array("comm_Author", username), Array("comm_DisSM", post_DisSM), Array("comm_DisUBB", post_DisUBB), Array("comm_DisIMG", post_disImg), Array("comm_AutoURL", post_DisURL), Array("comm_PostIP", getIP), Array("comm_AutoKEY", post_DisKEY),comm_IsAudit Array("comm_Email", Post_Email), Array("comm_WebSite", Post_WebSite))

修改为：

    AddComm = Array(Array("blog_ID", post_logID), Array("comm_Content", post_Message), Array("comm_Author", username), Array("comm_DisSM", post_DisSM), Array("comm_DisUBB", post_DisUBB), Array("comm_DisIMG", post_disImg), Array("comm_AutoURL", post_DisURL), Array("comm_PostIP", getIP), Array("comm_AutoKEY", post_DisKEY), Array("comm_Email", Post_Email),comm_IsAudit Array("comm_Email", Post_Email), Array("comm_WebSite", Post_WebSite))


2、设置楼层显示：占楼抢沙发设置
打开文件class/cls_article.asp,查找代码：

  '顶部翻页

在其上面添加如下代码：
 

 '抢沙发设置      
  Dim Lou_sum
    ' If log_ViewArr(6, 0) Then comDesc = "Desc" Else comDesc = "Asc" End If
  If comDesc="Desc" Then Lou_sum=comm_Num Else Lou_sum=1
  If comDesc="Desc" Then Lou_sum=Lou_sum-blogcommpage*(CurPage-1) Else Lou_sum=Lou_sum+blogcommpage*(CurPage-1)

查找代码：

   Pcount = Pcount + 1

在其下面添加如下代码：
 

   If comDesc="Desc" Then Lou_sum=Lou_sum-1 Else Lou_sum=Lou_sum+1

查找代码：
 

       ShowComm = ShowComm&"<a name=""comm_"&blog_CommID&""" href=""javascript:addQuote('"&blog_CommAuthor&"','commcontent_"&blog_CommID&"')""><img border=""0"" src=""images/icon_quote.gif"" alt="""" style=""margin:0px 4px -3px 0px""/></a>"

修改为：

   Dim Lou_show
   Select Case Lou_sum
   Case 1
    Lou_show="沙发"
   Case 2
    Lou_show="板凳" 
   Case 3
    Lou_show="地板"
   Case Else  
    Lou_show=Lou_sum&"楼"
   End Select
       ShowComm = ShowComm&"<span style=""float:right;cursor:pointer""><a name=""comm_"&blog_CommID&""" href=""javascript:addQuote('"&blog_CommAuthor&"','commcontent_"&blog_CommID&"')""><img border=""0"" src=""images/icon_quote.gif"" alt=""回复引用该发言"" style=""margin:0px 4px -3px 0px""/>引用该留言</a> "&Lou_show&"</span>"
]]> http://www.zhiwenweb.cn/article.asp?id=1157 <![CDATA[124.115.0的IP段访问频繁造成网站空间负载过荷：限制搜搜蜘蛛抓取频率的参考方法]]> lzwy0820@qq.com(任侠) Thu,29 Apr 2010 22:13:40 +0800 http://www.zhiwenweb.cn/default.asp?id=1157 根据IP地址查询得知，此IP是陕西省 西安市(电信机房) 电信，并非百度、谷歌等搜索引擎的蜘蛛爬虫。该IP段一般被日志记录为普通用户访问，多数站长认为是采集器、群发软件等，纷纷将此IP禁止访问。
其实据查这个IP段是腾讯SOSO的爬虫。目前SOSO新闻使用的IP是124.115.1段，与124.115.0段是同一个机房。大家都知道，以前用搜搜的时候都会提示搜索结果来自谷歌，这是因为搜搜的搜索技术来自于谷歌。但是自2009年9月李开复从谷歌辞职时，腾讯搜搜与谷歌的合作即已经到期，搜搜正式推出了自己的独立搜索引擎。
上面提到的这个IP段正是SOSO现在爬取页面的服务器群。
据观察统计该IP段地址列表为：
引用内容 引用内容
124.115.0.14
124.115.0.15
124.115.0.16
124.115.0.17
124.115.0.18
124.115.0.19
124.115.0.20
124.115.0.21
124.115.0.22
124.115.0.23
124.115.0.24
124.115.0.25
124.115.0.26
124.115.0.27
124.115.0.100
124.115.0.101
124.115.0.102
124.115.0.103
124.115.0.104
124.115.0.105
124.115.0.106
124.115.0.107
124.115.0.108
124.115.0.109
124.115.0.110
124.115.0.111
124.115.0.138
124.115.0.139
124.115.0.140
124.115.0.141
124.115.0.142
124.115.0.156
124.115.0.157
124.115.0.158
124.115.0.159
124.115.0.160
124.115.0.161
124.115.0.162
124.115.0.163
124.115.0.164
124.115.0.165
124.115.0.166
124.115.0.167
124.115.0.168
124.115.0.169
124.115.0.170
124.115.0.171

如果你的网站访问量小，空间（或服务器）能够承受的住，那么，你大可不必担心，蜘蛛抓取页面当然是站长们希望的。但是如果这种抓取确实是影响到了站点的正常运行，你就不得不采取点措施了。下面让志文工作室来帮助你分析一些可行的参考解决方案。
我们知道使用Google 网站管理员工具可以诊断和管理Googlebot 抓取网站的频率，这是SEO搜索引擎优化人员要了解和关注的，善用之将取得事半功倍的效果。但是对于其他搜索引擎的蜘蛛，我们可以怎么办呢？
一种方法是，如许多站长那样，在管理后台限制该IP段的访问，不过你可能又害怕这样会使站点的页面收录受到太大的影响，这样你可以尝试只限制统计到的IP中的一部分。
另一种方法是，你可以通过给腾讯Soso发过邮件要求降低搜搜蜘蛛的访量，其客服邮件地址为：sosospider@tencent.com。据说这样做是能够得到有效的回复的。
当然或许你很在意去发这样的邮件，那么还有其他办法，就是通过书写robots.txt进行限制和引导搜搜的蜘蛛sosospider。
比如你可以这样书写来控制蜘蛛抓取频率：
User-agent:*
Crawl-delay:400
意思为控制大概每400秒抓取一次。实际上同时抓取的不同服务器IP段蜘蛛很多，所以事实上抓取频率是少于400秒的，具体设置为多少，你可以根据自己站点的实际情况考虑。但是并不是所有的搜索引擎均支持Crawl-delay属性。此外，合适的书写robots.txt来控制蜘蛛的抓取，但书写robot也有一定的技巧，如果你对如何书写robots不太了解，可以参考下面这篇文章，这里介绍的很详细：
网站针对搜索引擎收录控制设置：robots.txt和Robots META标签应用详解
http://www.zhiwenweb.cn/default.asp?id=1088]]> http://www.zhiwenweb.cn/article.asp?id=1156 <![CDATA[IIS端口占用无法启动：启用IIS发生意外错误0x8ffe2740的原因及参考解决方案]]> lzwy0820@qq.com(任侠) Thu,29 Apr 2010 11:36:46 +0800 http://www.zhiwenweb.cn/default.asp?id=1156 启用IIS发生意外错0x8ffe2740
这是是不是很郁闷呢？志文工作室最近就遇到了类似的问题，下面列举下相关的问题原因以供参考。
原因
如果系统中存在端口冲突就有可能发生本情况. IIS默认使用80端口进行HTTP通信. 如果除IIS外的应用程序正在运行并且正在相同的IP地址上使用80端口,在您试图使用IIS管理器启动网站时您也可能收到该错误讯息。
解决方法
要解决这个问题,您可以进行以下任一项操作:
在IIS管理器中更改网站绑定端口为除80端口外的其它端口。具体操作方法：IIS默认网站-点击右键属性-把tcp端口改成其他数字就可。
停止正在使用80端口的应用程序,然后从IIS管理器中启动网站。如果你正在用迅雷软件，可以查一下，在迅雷的工具-配置-BT/端口设置里查看，如果TCP端口为80（默认为80），改为其它的数字，即可防止以后再因为使用迅雷而发生此类情况。当然也可能是其他程序占用了80端口，所以如果你不确定为何程序，可按照方法一来操作解决。
]]> http://www.zhiwenweb.cn/article.asp?id=1154 <![CDATA[replace函数：批量替换数据库中指定字段内指定字符串参考方法]]> lzwy0820@qq.com(任侠) Wed,28 Apr 2010 09:38:59 +0800 http://www.zhiwenweb.cn/default.asp?id=1154 语法
REPLACE ( 'string_e­xpression1' , 'string_e­xpression2' , 'string_e­xpression3' )
参数说明
'string_e­xpression1'
待搜索的字符串表达式。string_e­xpression1 可以是字符数据或二进制数据。
'string_e­xpression2'
待查找的字符串表达式。string_e­xpression2 可以是字符数据或二进制数据。
'string_e­xpression3'
替换用的字符串表达式。string_e­xpression3 可以是字符数据或二进制数据。

通俗理解即格式为：
Update 表名 SET 要替换的列=REPLACE(要替换的列,被替换的字符,替换后的字符)
示例SQL语句：
Update tableName SET columeName = REPLACE(columeName, 'a', 'b')

但是值得注意的一点是，SQL Server有 replace函数，可以直接使用；Access数据库的replace函数只能在Access环境下用，不能用在Jet SQL中,所以对ASP没用，在ASP中调用该函数会提示错误：表达式中 'REPLACE' 函数未定义。在Asp中可以写一个函数实现该功能。
示例函数：  
function   replace(title)  
{  
  replace(title,'aaa','bbbb')  
  return(title)  
}  
  bbb=replace(title)  
  update   .....   set   title='"&bbb&"'

ASP+access批量替换指定字符参考代码：
<%
Set Conn   = Server.CreateObject("ADODB.Connection")
Conn.Open  "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.MapPath("数据库名.mdb")
Set rs = Server.Createobject("ADODB.Recordset")
sql="Select * from [表名]"
rs.open sql,conn,1,3
while not rs.eof
    rs("字段名")=replace(rs("字段名"),"被替换的字符","替换为的字符")
    rs.update
    rs.movenext
wend
rs.close
set rs=nothing
conn.close
set conn=nothing
%> ]]> http://www.zhiwenweb.cn/article.asp?id=1149 <![CDATA[CSS学习进阶：一些CSS设计的实用小技巧参考]]> lzwy0820@qq.com(任侠) Thu,22 Apr 2010 16:40:29 +0800 http://www.zhiwenweb.cn/default.asp?id=1149
css3的圆角示例：
复制内容到剪贴板程序代码 程序代码
.element {  
.rounded{
    -moz-border-radius: 5px; /* Firefox */
    -webkit-border-radius: 5px; /* Safari */
     border-radius: 5px; /* future proofing */  
}  
.element-top-left-corner {  
-moz-border-radius-topleft: 5px;  
-webkit-border-top-left-radius: 5px;  
}  


圆角的做法
大体的编写方式便是如下.
好处是便于维护,只有一个图片.还可以某种程度上的任意缩放.缺点是多了无意义的html代码.
复制内容到剪贴板程序代码 程序代码
css：
.c,.c i,.c i i,.c b,.c b b,.c p{background-image:url(http://pics.taobao.com/bao/album/promotion/uiblog/purple.png);/*背景图片*/background-repeat:no-repeat;}
.c{width:200px;/*临时定的宽度*/background-position:0 -4px;}
.c i{display:block;height:4px;}
.c i i{margin:0 0 0 4px;background-position:right 0;}
.c b{display:block;height:4px;background-position:0 bottom;}
.c b b{margin:0 0 0 4px;background-position:right bottom;}
.c p{margin:0 0 0 4px;padding:0 4px 0 0;background-position:right -4px;}

html：
< div class="c">< i>< i>< /i>< /i>< p>按钮按钮按钮按钮按钮按钮按按按按按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮< /p>< b>< b>< /b>< /b>< /div>


table的全局定义
caption这个标签在firefox下会有左边有1px空隙的bug,很讨厌.能想到的简单的方法只有-1px的margin了.
复制内容到剪贴板程序代码 程序代码
css：
table{
border-collapse:collapse;
}
table caption,table td,table th{
border:1px solid #a2bbdd;/*边框颜色*/
background:#c3d9ff;/*背景颜色*/
}
table caption{
text-align:left;
border-bottom:none;
margin-left:-1px;
}

html：
< table>
< caption>表格标题< /caption>
< tr>
< th>标题< /th>
< th>标题< /th>
< th>标题< /th>
< th>标题< /th>
< /tr>
< tr>
< td> 内容< /td>
< td> 内容< /td>
< td> 内容< /td>
< td> 内容< /td>
< /tr>
< /table>


未知图片的垂直居中
复制内容到剪贴板程序代码 程序代码
CSS:
.tb-p-c{  display: table-cell;  vertical-align:middle;  width:140px;  height:140px;  text-align:center;  *display: block;  *font-size: 122px;  background:red;}.tb-p-c img {  vertical-align:middle;}

HTML:
<a class="tb-p-c"><img src="jishi070912_2.jpg" /></a>


跨浏览器的CSS透明度设计：
复制内容到剪贴板程序代码 程序代码
.transparent {  
    
  /* Modern Browsers */ opacity: 0.7;  
  /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";  
  /* IE 5-7 */ filter: alpha(opacity=70);  
  /* Netscape */ -moz-opacity: 0.7;
  /* Safari 1 */ -khtml-opacity: 0.7;  
}


CSS3的文字阴影：
复制内容到剪贴板程序代码 程序代码
.text { text-shadow: 1px 1px 1px #666; filter: Shadow(Color=#666666, Direction=135, Strength=5); }  


CSS3的盒子阴影：
复制内容到剪贴板程序代码 程序代码
.box { box-shadow: 5px 5px 5px #666;  -moz-box-shadow: 5px 5px 5px #666;  -webkit-box-shadow: 5px 5px 5px #666; }  


兼容的最小高度全兼容写法：
Min-height是个很有用的属性，但并非所有浏览器都兼容的，当然主要问题出在IE6，这个不支持标准的浏览器偏偏占据很大的市场份额，实在让设计师无奈。好在IE6对于overflow的特殊实现，又给我们实现Min-height提供了一个思路，所以产生了以下兼容各个主流浏览器的Min-height写法：
复制内容到剪贴板程序代码 程序代码
.element { min-height:600px; height:auto !important; height:600px;overflow:visible;}  


页面的最小宽度：
min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个<div> 放到 <body> 标签下，然后为div指定一个类，然后CSS这样设计：
复制内容到剪贴板程序代码 程序代码
#container{ min-width: 600px; width:e­xpression(document.body.clientWidth < 600? "600px": "auto" );}

第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

万能 float 闭合
将以下代码加入CSS文件中,给需要闭合的div加上 class="clearfix" 即可
复制内容到剪贴板程序代码 程序代码
/* Clear Fix */
.clearfix:after
{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix
{
display:inline-block;
}
/* Hide from IE Mac */
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */


清除浮动：
.hackbox{ display:table; //将对象作为块元素级的表格显示}
或者
.hackbox{ clear:both;}
或者加入:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，所以并不影响到IE/WIN浏览器。这种最麻烦的
#box:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden;}

DIV浮动IE文本产生3象素的bug
左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.
复制内容到剪贴板程序代码 程序代码
#box{ float:left; width:800px;}#left{ float:left; width:50%;}
#right{ width:50%;}
*html #left{ margin-right:-3px; //这句是关键}

HTML代码：
复制内容到剪贴板程序代码 程序代码
<div id="box"><div id="left"></div> <div id="right"></div></div>


属性选择器(这个不能算是兼容,是隐藏css的一个bug)
复制内容到剪贴板程序代码 程序代码
p[id]{}div[id]{}

这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用
属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

IE捉迷藏：
当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。
有些内容显示不出来，当鼠标选择这个区域时发现内容确实是在页面的。
解决办法：对#layout使用line-height属性，或者给#layout使用固定高和宽；页面结构尽量简单。

高度不适应：
高度不适应是当内层对象的高度发生变化时，外层高度不能自动进行调节，特别是当内层对象使用margin 或paddign 时。
例：
引用内容 引用内容
<div id="box">
<p>p对象中的内容</p>
</div>
CSS：#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }

解决方法：在P对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}，或者为DIV加上border属性。

针对firefox ie6 ie7的css样式Hack方法：
现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针对IE7不错的hack方式，就是使用“*+html”。
*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签。
现在可以这样写一个CSS：
引用内容 引用内容
#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE7 */

那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。
注意:
*+html 对IE7的HACK 必须保证HTML顶部有如下声明：
复制内容到剪贴板程序代码 程序代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"　"http://www.w3.org/TR/html4/loose.dtd">

关于居中
垂直居中： 将 line-height 设置为 当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.)
水平居中： margin: 0 auto;

截字省略号:
复制内容到剪贴板程序代码 程序代码
select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }

这个是在越出长度后会自行的截掉多出部分的文字，并以省略号结尾，很好的一个技术。只是目前Firefox并不支持。

只有Opera识别
引用内容 引用内容
@media all and (min-width: 0px){ select {……} }
针对Opera浏览器做单独的设定。


IE的if条件Hack
引用内容 引用内容
<!--[if IE]> Only IE <![endif]-->
所有的IE可识别
<!--[if IE 5.0]> Only IE 5.0 <![endif]-->
只有IE5.0可以识别
<!--[if gt IE 5.0]> Only IE 5.0+ <![endif]-->
IE5.0包换IE5.5都可以识别
<!--[if lt IE 6]> Only IE 6- <![endif]-->
仅IE6可识别
<!--[if gte IE 6]> Only IE 6/+ <![endif]-->
IE6以及IE6以下的IE5.x都可识别
<!--[if lte IE 7]> Only IE 7/- <![endif]-->
仅IE7可识别


不会改变布局的图片滚动边框
复制内容到剪贴板程序代码 程序代码
#example-one a img, #example-one a {
    border: none;
    overflow: hidden;
    float: left;
}
#example-one a:hover {
    border: 3px solid black;
}
#example-one a:hover img {
    margin: -3px;
}


跨浏览器的纯CSS提示
HTML代码


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]


为选中的文本设置颜色(尽支持Firefox/Safari)
复制内容到剪贴板程序代码 程序代码
::selection {
    background: #ffb7b7; /* Safari */
}
::-moz-selection {
    background: #ffb7b7; /* Firefox */
}


在链接后面添加一个文件类型图标
复制内容到剪贴板程序代码 程序代码
a[href^="http://"] {
    background:transparent url(../images/external.png) center right no-repeat;
    display:inline-block;
    padding-right:15px;
}


css代码的简写
css缩写的语法，对新手有一定帮助
* 0px不需要单位，直接:margin:0
* 盒模型的缩写，语法是margin:上 右 下 左;.甚至可以简写成margin:上 (右左) 下,当然右左的值应该是* 一样的
* css属性的最后一项”;”号省略。（不建议 ^_^）
* 字体宽度normal用400代替,bold用700代替。
* 16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：#000000可以缩写为#000;#0044DD* 可以缩写为#04D;
* border边框的缩写，语法是border:width style color,类似boder:1px solid red;
* 背景background的缩写,语法是color image repeat attachment position.类似:background:#f00 url(background.gif) no-repeat fixed 0 0( 为什么我从不写fixed呢?)
字体的缩写,类似font:italic small-caps bold 1em/140% “SimSun”,sans-serif,可以省略到最简单font:12px “SimSun”.
* list的属性缩写,语法list-style:square inside url(image.gif) ,不过一般咱们都不用.

其他几点应该注意的地方：
* FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题；
* ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)；
* 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应；
* 关于手形光标. cursor: pointer. 而hand 只适用于 IE;
* Firefox和IE7都支持td的:hover（但IE7要支持td:hover必须正确设置Doctype设置成xhtml1.0 trantional即可，如果没有设置Doctype，将会和IE6一样，不支持td:hover);
* 确保在单词之间的空白处不换行，则在a,a:visited的样式中增加css规则：white-space:nowrap;
* 在IE6中，虽然链接设置成块级元素，但是仍然只有在鼠标指针经过文字，才能触发鼠标经过效果，而不是进入矩形区域，就可以触发。在IE7中已经修正了这个bug，解决IE6的这个bug只需在a中增加一条css规则：height:1em;
* <script language=”javascript”>……</script> 不能通过w3c
   <script type=”text/javascript”>……</script> 能通过w3c]]> http://www.zhiwenweb.cn/article.asp?id=1147 <![CDATA[玉树地震国哀日，网站素装以示哀悼之情：兼容浏览器素装修改方法参考]]> lzwy0820@qq.com(任侠) Wed,21 Apr 2010 11:25:45 +0800 http://www.zhiwenweb.cn/default.asp?id=1147 国哀日里，很多站长都自觉的挂起了网站素装，以自己的方式表达我们的情感。
但是，很多站长有点苦恼的是，网上流行的素装代码，只适合IE浏览器。那么，有什么简单点的方式，让所有浏览器均能显示这种效果呢？
修改图片，对了，这确实是最简单也是唯一的方式，百度等大型网站都是这么做的。
然而，站长们面对站点里众多的图片，依然感觉很难下手。其实，我们只需要实现站点的主题色调为灰白就行了。这样一来，需要修改的图片并不是很多。
下面让志文工作室来给大家介绍一下，添加代码以及简单修改图片的方法，具体效果可参看志文工作室全站页面。

1、首先，可以在网站的css文件的底部，加入如下参考代码：
复制内容到剪贴板程序代码 程序代码
*{color:#555!important;border-color:#949494!important}
body{background:#f5f5f5!important;}
html{filter:gray}

当然如果你要加在单独页面里，也可以这样加在页面的头部：
复制内容到剪贴板程序代码 程序代码
<style type="text/css">
*{color:#555!important;border-color:#949494!important}
body{background:#f5f5f5!important;}
html{filter:gray}
</style>

以上代码是利用CSS的优先级!important方式，设置了网站所有文字颜色为#555灰色，所有显示的边框颜色为#949494灰色，并设置body页面的背景为#f5f5f5灰白色。同时设置了IE的灰色滤镜。

2、然后，简单修改图片的方法，用PS的图层调色来完成，非常快速简单，方法如下：
Photoshop里打开需要处理的图片，选择： 图像 - 调整 - 色相/饱和度，然后将饱和度设置为-100（即滑动条拉到最左边），然后保存图片即可。

当然如果你处理的是PNG或GIF格式图片，也可以直接选择：文件 - 存储为web和设备所用格式，然后在“使用通道使颜色减低”里选择：grayscale，然后保存图片，彩色图片即变为了灰色。

其实这样来做，花费不了多少时间，一般的站点，十分钟内即可搞定。
让我们以自己的方式，向玉树受灾同胞们哀悼祈福！]]>