分类 HTML,CSS,JS,PHP 下的文章

CSS hack是指我们为了兼容各浏览器,而使用的特别的css定义技巧。

#test {   
  width:300px;   
  height:300px;   
  background-color:blue; /*firefox*/
  background-color:red\9; /*all ie*/
  background-color:yellow\0; /*ie8*/
  +background-color:pink; /*ie7*/
  _background-color:orange; /*ie6*/
}  
:root #test { background-color:purple\9; } /*ie9*/
@media all and (min-width:0px) { #test {background-color:black\0;} } /*opera*/
@media screen and (-webkit-min-device-pixel-ratio:0) { #test {background-color:gray;} } /*chrome and safari*/

分析上面的代码:

background-color:blue; 各个浏览器都认识,这里给firefox用;
background-color:red\9; \9 所有的ie浏览器可识别;
background-color:yellow\0; \0 是留给ie8的,但笔者测试,发现最新版opera也认识,不过后面自有hack写了给opera认的,所以,\0我们就认为是给ie8留的;
+background-color:pink; + ie7定了;
background-color:orange; 专门留给神奇的ie6;
root #test { background-color:purple\9; } :root 是给ie9的,:root 选择符 {属性\9;}
@media all and (min-width:0px){ #test {background-color:black\0;} } 这个是老是跟ie抢着认\0的神奇的opera,必须加个\0,不然firefox,chrome,safari也都认识。。。
@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }最后这个是浏览器新贵chrome和safari的。

兼容一览表:
兼容一览表

在写框架ArkPlus的时候遇到了需要根据多维数组元素的一些值排序的问题,用PHP5.3的闭包功能写了这个函数。

/**
 * 多维数组自然排序
 * @author [email protected]
 * @param array $array 待排序数组
 * @param string $by,$b2,b3 排序字段,至少一个
 */
function array_order_by(&$array, $by) {
  $args = func_get_args(); $argn = func_num_args();
  uasort($array, function($a, $b) use($args, $argn) {
    for($i = 1; $i < $argn, $by = $args[$i]; $i++) {
      $rs = strnatcmp(isset($a[$by])?$a[$by]:'', isset($b[$by])?$b[$by]:'');
      if($rs !== 0 || empty($args[$i+1])) { return $rs; }
    }
    return 0;
  });
}

$menu = array (
  array('order' => '2_0', 'data' => '6_name'),
  array('order' => '1_0', 'data' => '19_name'),
  array('order' => '1_0', 'data' => '12_name'),
  array('order' => '1_1_0', 'data' => '1_name'),
  array('order' => '2_1_0', 'data' => '5_name'),
  array('order' => '1_2_0', 'data' => '45_name'),
  array('order' => '1_2_1_0', 'data' => '8_name'),
);

array_order_by($menu, 'order', 'data');
print_r($menu);

完美解决IE6不支持position:fixed的BUG

/* position fixed Top */
.fixed-top {position:fixed;bottom:auto;top:0;}
/* position fixed Bottom */
.fixed-bottom {position:fixed;bottom:0;top:auto;}
/* position fixed Left */
.fixed-left {position:fixed;right:auto;left:0;}
/* position fixed right */
.fixed-right {position:fixed;right:0;left:auto;}

/* IE6 Fixed Position Jitter Fix */
* html,* html body {background-image:url(about:blank);background-attachment:fixed;}
/* IE6 position fixed Top */
* html .fixed-top {position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));}
/* IE6 position fixed right */
* html .fixed-right {position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));}
/* IE6 position fixed Bottom */
* html .fixed-bottom {position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
/* IE6 position fixed Left */
* html .fixed-left {position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft));}

/**
 * removeHorse.php by 2012.5.5
 * 尛岢 kerring
 */
set_time_limit(0);
arScan('./', '*.{php,htm,html}', array(
  array(
    '/eval\(.+\)/iUs',
    '/system\(.+\)/iUs'
  ),
  array('', '')
));

//扫描嵌入代码
function arScan($path, $mark, $expr, $i = 0) {
  $files = arGlob($path, $mark);
  foreach($files as $key => $file) {
    if(!$fc = file_get_contents($file)) { continue; }
    $fr = preg_replace($expr[0], $expr[1], $fc, -1, $rs);
    if($rs > 0) {
      #file_put_contents($file, $fc);
      $i++;
    }
    echo "[$rs] {$file} \n";
  }
  echo "共处理文件{$i}个";
}

//获取文件列表
function arGlob($path = './', $mark = '*', $full = false) {
  $files = array();
  if($result = glob($path.$mark, GLOB_MARK|GLOB_BRACE)) {
    $result = str_replace('\\', '/', $result);
    foreach($result as $file) {
      substr($file, -1, 1) == '/' || $files[] = $file;
    }
  }
  if($result = glob($path.'*', GLOB_MARK|GLOB_ONLYDIR)) {
    $result = str_replace('\\', '/', $result);
    foreach($result as $path) {
      $full && $files[] = $path;
      $files = array_merge($files, arGlob($path, $mark, $full));
    }
  }
  return $files;
}

在IE6、IE7中不识别display:inline-block属性,但使用inline-block属性在IE下会触发layout,从而使内联元素拥有了display:inline-block属性的表症。从上面的分析也不难理解为什么IE6、IE7下对块元素设置display:inline-block属性无法实现inline-block的效果。这时块元素仅仅是被inline-block触发了layout,而它本就是行布局,所以触发后,块元素依然是行布局。IE8识别display:inline-block;

在IE6、IE7中实现块元素的inline-block效果有以下两种方法:

1.先使用display:inline-block属性触发layout,然后再定义display:inline让块元素呈现内联对象(两个display要先后放在两个CSS声明中才有效果,这是IE的一个经典BUG)。

2.直接将块元素设置为display:inline呈现为内联对象,然后触发layout(如zoom:1)。

<html>
<head>
<style type="text/css">
.box{width:100px;height:100px;border:1px solid #FF7900;margin:8px;}
.ib1{display:inline-block;}
.ib1{*display:inline;}
.ib2{display:inline-block;*display:inline;*zoom:1;}
</style>
</head>
<body>
<div class="box ib1">1</div><div class="box ib1">2</div>
<div class="box ib2">3</div><div class="box ib2">4</div>
</body>
</html>