标签归档：CSS

CSS Hack for IE

发表回复

每次解决CSS兼容性问题都要问度娘，我那么懒，怎能行呢。

所以亲测了一些粗暴有效的CSS Hack，以后问自己就行了。

CSS Hack IE6 IE7 IE8 IE9 e.g.
_ ● × × × _color:red;
* ● ● × × *color:red;
× × ● ● color:red;
9 ● ● ● ● color:red9;

php+css让缩略图显示图片的中心部分

1条回复

如果原始图片为长方形，让图片缩略图只截取图片中心的正方形部分显示。

分为两部分操作，以缩略图为200px的正方形为例，因缩略图访问次数较多，为节省流量，用php生成一个图片长宽最小不小于200px的保持原图片长宽比的小图：

$thumb_width = $thumb_height = 200;

// Get new dimensions
list($width, $height) = getimagesize($filename);

// If height is longer than width, height increase, width unchanged.
if ($width < $height)
{
$thumb_height = ($thumb_width / $width) * $height;
}
else
{
$thumb_width = ($thumb_height / $height) * $width;
}

// Resample
$image_p = imagecreatetruecolor($new_width, $new_height);
$image = imagecreatefromjpeg($filename);
imagecopyresampled($image_p, $image, 0, 0, 0, 0, $thumb_width, $thumb_height, $width, $height);

// Output
imagejpeg($image_p, null, 100);

第二步，用CSS显示缩小后图片的中间部分：

) no-repeat 50% 50%; max-height:200px; max-width:200px;”>

如果有更好的方法，欢迎回复。

IE浏览器的if条件注释Hack

2条回复

最近又开始客串美工的角色了，要写一个下拉导航菜单。

JS和CSS两者，我更加喜欢CSS方式，它的兼容性更好。

但IE6下非<a>标签不支持:hover伪类，无奈下翻出来N年前收集的Hack。

<!—-[if !IE]> 除IE外都可识别 < ![endif]—>

<!–[if IE]> 所有的IE可识别 < ![endif]–>

<!–[if IE 5.0]> 只有IE5.0可以识别 < ![endif]–>

<!–[if IE 5]> 仅IE5.0与IE5.5可以识别 < ![endif]–>

<!–[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以识别 < ![endif]–>

<!–[if IE 6]> 仅IE6可识别 < ![endif]–>

<!–[if lt IE 6]> IE6以及IE6以下版本可识别 < ![endif]–>

<!–[if gte IE 6]> IE6以及IE6以上版本可识别 < ![endif]–>

<!–[if IE 7]> 仅IE7可识别 < ![endif]–>

<!–[if lt IE 7]> IE7以及IE7以下版本可识别 < ![endif]–>

<!–[if gte IE 7]> IE7以及IE7以上版本可识别 < ![endif]–>

使用方法很简单，可以这样写：

<body>

<!–[if IE 6]> 您正使用 IE6 <br /> IE6 是垃圾 < ![endif]–>

<!–[if IE 7]> 您正使用 IE7 <br /> IE7 好慢 < ![endif]–>

<!–[if !IE]> <h6>我在使用 Chrome ，推荐您也使用^_^</h6> < ![endif]–>

</body>

DIV+CSS 圆角矩形

2条回复

圆角矩形一般用圆角图片+DIV定位实现，
偶这次完全用DIV+CSS实现了，
本想用做网站的分栏框中，
后来想了下，似乎不太实用，
假如一个页面有10+N个矩形框，
意味着页面中嵌套的DIV至少会有60+N个，
这样冗长的代码，似乎不如图片来得简单，
汗……
不知会不会加重浏览器负担，
另外浏览器兼容性问题还没有测试。
继续汗……
……
似乎钻牛角尖了，
迷茫这种方法是否具有实用价值，

但，代码还是提供出来，寻求更简单的方法ing。

<style>
.ta1,.ta2,.ta3,.ta4,.tb1,.tb2,.tb3,.tb4,.tc{display:block;overflow:hidden;}
.ta1,.ta2,.ta3,.tb1,.tb2,.tb3{height:1px;}
.ta2,.ta3,.ta4,.tb2,.tb3,.tb4,.tc{border-left:1px solid #999;border-right:1px solid #999;background:#CCC;}
.ta1,.tb1{margin:0 5px;background:#999;}
.ta2,.tb2{margin:0 3px;border-width:2px;}
.ta3,.tb3{margin:0 2px;}
.ta4,.tb4{margin:0 1px;height:2px;}
.text{margin:0px 20px;font-size:20px;}
</style>

 

 

 

 

 

  

DIV+CSS 圆角矩形

 

 

 

 

 

</div>