Hpyer 的未知空间 » 代码 http://hpyer.cn 现实的世界里寻找点滴的未知空间 Wed, 01 Feb 2012 02:16:21 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Chrome、Safari3及Opera9的CSS Hack http://hpyer.cn/css-hack-for-chrome-safari3-and-opera9.html http://hpyer.cn/css-hack-for-chrome-safari3-and-opera9.html#comments Wed, 19 Oct 2011 06:26:36 +0000 Hpyer http://hpyer.cn/?p=758 之前发布了一篇《IE6、IE7、IE8、Firefox、Chrome 等浏览器兼容的CSS hack》，其中介绍的方法对于大部分应用足够了，但是特殊情况下，在Chrome、Safari3及Opera9下还是会造成一定困扰，这里介绍一种针对 webkit 内核的css hack。使用方法如下：

body { color:red; }
 
@media screen and (-webkit-min-device-pixel-ratio:0) {
    /***** 在 Chrome、Safari3 及 Opera9 下字体颜色为蓝色，其他浏览器为红色 *****/
    body { color:blue; }
}
在 Chrome、Safari3 及 Opera9 下字体颜色为蓝色，其他浏览器为红色
]]> http://hpyer.cn/css-hack-for-chrome-safari3-and-opera9.html/feed 1 CSS 的优先机制 http://hpyer.cn/the-priority-of-css.html http://hpyer.cn/the-priority-of-css.html#comments Sat, 01 Oct 2011 12:44:46 +0000 Hpyer http://hpyer.cn/?p=745 样式的优先级

多重样式（Multiple Styles）：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况。

一般情况下，优先级如下(从高到低)：

  1. （内联样式）Inline style
  2. （内部样式）Internal style sheet
  3. （外部样式）External style sheet

有个例外的情况，就是如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

示例如下：

<head>
    <style type="text/css">
    /* 内部样式 */
    h3{color:green;}
    </style>
 
    <!-- 外部样式 style.css -->
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <!-- 设置：h3{color:blue;} -->
</head>
<body>
    <h3>测试！</h3>
</body>

选择器的优先权

解释：

  1. 内联样式表的权值最高 1000；
  2. ID 选择器的权值为 100
  3. Class 类选择器的权值为 10
  4. HTML 标签选择器的权值为 1

利用选择器的权值进行计算比较，示例如下：

<html>
  <head>
    <style type="text/css">
        #redP p {
             /* 权值 = 100+1=101 */
             color:#F00;  /* 红色 */
        }
 
        #redP .red em {
             /* 权值 = 100+10+1=111 */
             color:#00F; /* 蓝色 */
 
        }
 
        #redP p span em {
             /* 权值 = 100+1+1+1=103 */
             color:#FF0;/*黄色*/
        }
    </style>
  </head>
  <body>
     <div id="redP">
        <p class="red">red
           <span><em>em red</em></span>
        </p>
        <p>red</p>
     </div>
  </body>
</html>

结果： 标签内的数据显示为蓝色。

CSS 优先级法则：

  1. 选择器都有一个权值，权值越大越优先；
  2. 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
  3. 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；
  4. 继承的CSS 样式不如后来指定的CSS 样式；
  5. 在同一组属性设置中标有“!important”规则的优先级最大；示例如下：
<html>
  <head>
    <style type="text/css">
    #redP p{
        /*两个color属性在同一组*/
        color:#00f !important; /* 优先级最大 */
        color:#f00;
    }
    </style>
  </head>
  <body>
     <div id="redP">
       <p>color</p>
       <p>color</p>
     </div>
  </body>
</html>

结果：在Firefox 下显示为蓝色；在IE 6 下显示为红色；

使用脚本添加样式

当在连接外部样式后，再在其后面使用JavaScript 脚本插入内部样式时（即内部样式使用脚本创建），IE 浏览器就表现出它的另类了。代码如下：

<html>
<head>
  <title> demo </title>
  <meta name="Author" content="xugang" />
 
  <!-- 添加外部CSS 样式 -->
  <link rel="stylesheet" href="styles.css" type="text/css" />
  <!-- 在外部的styles.css文件中，代码如下：
       h3 {color:blue;}
  -->
 
  <!-- 使用javascript 创建内部CSS 样式 -->
  <script type="text/javascript">
  <!--
    (function() {
        var agent = window.navigator.userAgent.toLowerCase();
        var is_op = (agent.indexOf("opera") != -1);
        var is_ie = (agent.indexOf("msie") != -1) && document.all && !is_op;
        var is_ch = (agent.indexOf("chrome") != -1);
 
        var cssStr="h3 {color:green;}";
        var s=document.createElement("style");
        var head=document.getElementsByTagName("head").item(0);
        var link=document.getElementsByTagName("link");
        link=link.item(0);
 
        if(is_ie) {
            if(link)
                head.insertBefore(s,link);
            else
                head.appendChild(s);
            document.styleSheets.item(document.styleSheets.length-1).cssText=cssStr;
        } else if(is_ch) {
            var t=document.createTextNode();
            t.nodeValue=cssStr;
            s.appendChild(t);
            head.insertBefore(s,link);
        } else {
            s.innerHTML=cssStr;
            head.insertBefore(s,link);
        }
    })();
  //-->
  </script>
</head>
<body>
  <h3>在IE中我是绿色，非IE浏览器下我是蓝色！</h3>
</body>
</html>

结果：在Firefox / Chrome / Safari / Opera 中，文字都是蓝色的。而在IE 浏览器中，文字却是绿色的。

附加

在IE 中添加样式内容的JavaScript 代码：

var s=document.createElement("style");
var head=document.getElementsByTagName("head").item(0);
var link=document.getElementsByTagName("link").item(0);
 
head.insertBefore(s,link);
/* 注意：在IE 中，
   虽然代码是将<style>插入在<link>之前，
   但实际内存中，<style>却在<link>之后。
   这也是“IE中奇怪的应用CSS的BUG”之所在！
*/
 
var oStyleSheet = document.styleSheets[0];
//这实际是在<link>的外部样式中追加
oStyleSheet.addRule("h3","color:green;");
alert(oStyleSheet.rules[0].style.cssText);
alert(document.styleSheets[0].rules[0].style.cssText);
 
//方式2
var cssStr="h3 {color:green;}";
document.styleSheets.item(document.styleSheets.length-1).cssText=cssStr;

IE 浏览器下载或者渲染的顺序可能如下：

  1. IE 下载的顺序是从上到下；
  2. JavaScript 函数的执行会阻塞IE 的下载；
  3. IE 渲染的顺序也是从上到下；
  4. IE 的下载和渲染是同时进行的；
  5. 在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（但并不是说所有相关联的元素都已经下载完。）
  6. 在下载过程中，如果遇到某一标签是嵌入文件，并且文件是具有语义解释性的（例如：JS脚本，CSS样式），那么此时IE的下载过程会启用单独连接进行下载。并且在下载后进行解析，如果JS、CSS中如有重定义，后面定义的函数将覆盖前面定义的函数。
  7. 解析过程中，停止页面所有往下元素的下载。样式表文件比较特殊，在其下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前已经渲染的）重新进行样式渲染。并以此方式一直渲染下去，直到整个页面渲染完成。
  8. Firefox 处理下载和渲染的顺序大体相同，只是在细微之处有些差别，例如：iframe 的渲染。

原文：http://www.cnblogs.com/xugang/archive/2010/09/24/1833760.html

]]> http://hpyer.cn/the-priority-of-css.html/feed 0 调用腾讯QQ天气预报的JS代码 http://hpyer.cn/a-js-code-to-loading-weather-from-qq.html http://hpyer.cn/a-js-code-to-loading-weather-from-qq.html#comments Sat, 17 Sep 2011 01:12:37 +0000 Hpyer http://hpyer.cn/?p=738 发一个个人觉得比较好用的天气预报JS代码，是腾讯QQ的，且可以根据访问者的IP自动判断并输出其所在地的天气，很不错哦~

测试效果：

 


代码如下：

<div id="wealth">&nbsp;</div>
<script type="text/javascript" src="http://minisite.qq.com/js/j.minisite.weather.js" charset="gbk"></script>
<script type="text/javascript">
MiniSite.Weather.print("wealth");
</script>

以下2012年2月1日更新

最近发现这段代码不能用了，测试后发现，是不能调用QQ的IP库（http://fw.qq.com:80/ipaddress）导致的，所以本人对脚本进行了调整，使其可以手动设置显示哪个城市的天气，并且在无法读取IP库的时候显示默认城市（MiniSite.Weather.defaultCity 的值）的天气。

修改的 j.minisite.weather.js 下载地址：Minisite Weather   [v1.0 - 4.45 kB - 1 Hits]

调用方法：

// 和原来一样，但是如果无法读取ip库的情况下会显示默认城市的天气
MiniSite.Weather.print("wealth");
 
// 手动设置城市，如果是直辖市，则类似：
MiniSite.Weather.print("wealth", "XX省", "XX市");
// 如果是直辖市，则类似：
MiniSite.Weather.print("wealth", "北京市", "北京市");

注：如果仍然想要自动判断用户所在城市的功能，则需要通过服务器端脚本（PHP、ASP、Java等）来实现了。可以谷歌、百度一下“XX读取纯真IP库”（XX是对应的服务器端脚本）。
纯真IP库最新版：http://www.crsky.com/soft/2611.html

]]> http://hpyer.cn/a-js-code-to-loading-weather-from-qq.html/feed 0 IE6/7 inline-block实现及分析 http://hpyer.cn/solution-of-inline-block-in-ie6-and-ie7.html http://hpyer.cn/solution-of-inline-block-in-ie6-and-ie7.html#comments Fri, 03 Jun 2011 14:44:25 +0000 Hpyer http://hpyer.cn/?p=722 ie6，ie7的haslayout属性是个让人头疼的问题。在做导航条的时候，一般会用到ul li结构，大多数时候我们是把li设置为浮动，让其并排显示在同一行。还有一种方法就是设置li为display:inline;这样可以达到同样的效果，但是问题是inline元素的特性：默认无法设置宽度，高度，以及上下margin，（关于padding，情况有点特殊，在ie6，7中 inline元素是无法设置上下padding的，但是在标准浏览器里面是可以设置上下padding的）。

鉴于inline元素的这种特性，如果我们不浮动并且想让li显示在一行，而且可以设置高度，宽度以及上下margin，上下padding等属性，应该怎么办呢？你一定会想到一个属性display:inline-block; 对！”inline-block”就是干这个事的，让一个元素既不换行又具有block元素的特性。不过有点小问题，让我们看代码：

<!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>display-block</title>
<style>
ul {background:#ccc;padding:0;margin:0;list-style:none;}
li {display:inline-block;
width:80px;
height:20px;
margin:10px;
padding:10px;
text-align:center;
background:#cfc;}
</style>
</head>
<body>
<ul>
<li>测试</li>
<li>测试</li>
<li>测试</li>
<li>测试</li>
</ul>
</body>
</html>

上面的例子，在firefox，opera等标准浏览器里面已经达到效果了，但是在ie6和ie7下却发现每个li元素仍然独占一行，（关于margin合并的问题日后再说）。这是因为ie6和ie7并不完全支持inline-block这个属性值。通过上面的例子会发现加不加display:inline-block;对于它们完全没有任何影响。

那么让我们来想办法解决这个问题，这就涉及到ie6，7中的haslayout属性了。ie6，7中的inline元素有个特殊的情况，就是触发了ie的hasLayout属性以后就拥有了layout。此时inline元素的表现和标准浏览器里面的inline-block元素基本相同。看下面这个例子，我们用ie的私有属性zoom来触发hasLayout，然后看看inline元素的表现。

<!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>display-block</title>
<style>
span {width:200px;height:50px;margin:10px;padding:20px;background:#ccc;zoom:1;}
</style>
</head>
<body>
<span>span</span>
</body>
</html>

可以看到在ie6，7中inline元素span已经表现得和一个display:inline-block元素一摸一样了，但是在标准浏览器中span仍然是行内元素（宽高以及上下margin都无效）。

如果声明了不正确DTD，导致ie6在quirks 模式下解析，那么ie6会自动触发inline元素的haslayout，不过这里只讨论正常情况下的解析，所以加了个zoom:1来触发haslayout;zoom的值设置为除了auto外的任何值都会触发haslayout，之所以经常用zoom:1;是因为zoom这个属性本身是ie的缩放属性，设置为其他值会导致元素在ie下变形，设置为1既是保持原形不缩放。

了解了上面的情况，我们就可以来解决之前那个问题了。可以改原先的css代码如下：

li {display:inline-block;    /* firefox等标准浏览器识别*/
*display:inline;      /* 只有ie6和ie7识别*/
zoom:1;               /* 触发ie6和ie7下的haslayout */
width:80px;
height:20px;
margin:10px;
padding:10px;
text-align:center;
background:#cfc;
}

让标准浏览器识别display:inline-block;让ie6，7识别display:inline;来覆盖上面的display:inline-block;（我为什么要说”覆盖”？）。然后通过zoom:1;来触发haslayout让inline元素在ie中表现得和inline-block元素一样。

<!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>display-block</title>
<style>
ul {background:#ccc;padding:0;margin:0;list-style:none;}
li {display:inline-block;
*display:inline;
zoom:1;
width:80px;
height:20px;
margin:10px;
padding:10px;
text-align:center;
background:#cfc;
}
</style>
</head>
<body>
<ul>
<li>测试</li>
<li>测试</li>
<li>测试</li>
<li>测试</li>
</ul>
</body>
</html>

可以看到，现在在各浏览器里面的显示已经一致了。li元素都显示在同一行。

不过我上面问了：为什么要说覆盖？

假如我们把上面的css代码中的

display:inline-block;
*display:inline;

两句调换一下顺序会怎样？你会发现display:inline-block;覆盖了*display:inline;导致在ie6，7中原先的样式又失效了，这说明什么？说明ie6和ie7是认识display:inline-block的，所以我在前面说”不完全支持”而没有说”完全不支持”，嘿嘿，我可没有打自己嘴巴。之所以说”不完全支持”是因为还是有一点作用，虽然display:inline-block对ie6，7中的元素表现没有任何直接影响，但是它会触发inline元素的haslayout。只有这一个作用，让我们再回到前面的例子：

span {width:200px;height:50px;margin:10px;padding:20px;background:#ccc;
display:inline-block;}
<!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>display-block</title>
<style>
span {width:200px;height:50px;margin:10px;padding:20px;background:#ccc;display:inline-block;}
</style>
</head>
<body>
<span>span</span>
</body>
</html>

可以看到，我们把zoom:1换成了display:inline-block以后，在ie6，7中span仍然和firefox等标准浏览器下一样，具有了设置的宽高和上下margin，上下padding。它表现得和display:inline-block同学一样好，不过这并不是因为display:inline-block这条声明直接生效了，而是因为display:inline-block触发了ie的haslayout属性，使得inline元素具有了inline-block的表现。

原文地址：http://www.k68.org/?p=495

]]> http://hpyer.cn/solution-of-inline-block-in-ie6-and-ie7.html/feed 0 简单快速解决“无法删除文件和文件夹” http://hpyer.cn/solution-about-unable-to-be-deleted-files-or-folders.html http://hpyer.cn/solution-about-unable-to-be-deleted-files-or-folders.html#comments Thu, 19 May 2011 03:25:46 +0000 Hpyer http://hpyer.cn/?p=721 在网上找到一个很简单但是却很有效的删除文件和文件夹的办法。其实就两条dos语句：

DEL /F /A /Q \\?\%1
RD /S /Q \\?\%1

新建文本文档，将上面代码复制其中，保存为DEL.bat。
将不能删除的文件和文件夹拖入此DEL.bat文件就可以删除了！

这里提供一个写好的批处理文件供大家下载：

强制删除文件和文件夹   [v1.0 - 222 bytes - 9 Hits]

将要删除的文件或文件夹拖动到.bat文件上松开鼠标即可。

]]> http://hpyer.cn/solution-about-unable-to-be-deleted-files-or-folders.html/feed 0 设置IIS下PHP环境的DOCUMENT_ROOT http://hpyer.cn/set-php-document_root-in-iis.html http://hpyer.cn/set-php-document_root-in-iis.html#comments Thu, 31 Mar 2011 01:57:30 +0000 Hpyer http://hpyer.cn/?p=714 这两天把一网站架到了IIS服务器上，却发现在读取 $_SERVER['DOCUMENT_ROOT'] 的时候是空值。翻阅了PHP的文档，发现对该变量的解释为：“当前运行脚本所在的文档根目录。在服务器配置文件中定义。”这才突然想到，Apache的配置文件里确实有 DocumentRoot 这一项，而IIS则没有这个配置文件。好吧，既然没有，那就值得用别的方式来“修复”IIS服务器了。把下面这段代码加到程序中，注意必须在你调用 $_SERVER['DOCUMENT_ROOT'] 之前哦！

  1. if(empty($_SERVER['DOCUMENT_ROOT']) && !empty($_SERVER['SCRIPT_FILENAME'])) {
  2.     $_SERVER['DOCUMENT_ROOT'] = str_replace( '\\', '/', substr($_SERVER['SCRIPT_FILENAME'], 0, 0 - strlen($_SERVER['PHP_SELF'])));
  3. }
  4. if(empty($_SERVER['DOCUMENT_ROOT']) && !empty($_SERVER['PATH_TRANSLATED'])) {
  5.     $_SERVER['DOCUMENT_ROOT'] = str_replace( '\\', '/', substr(str_replace('\\\\', '\\', $_SERVER['PATH_TRANSLATED']), 0, 0 - strlen($_SERVER['PHP_SELF'])));
  6. }
]]> http://hpyer.cn/set-php-document_root-in-iis.html/feed 3