css

20段Web开发不容错过的CSS代码

Web开发技术每年都在革新,浏览器已逐渐支持CSS3特性,并且网站设计师和前端开发者普遍采用这种新技术进行设计与开发。但仍然有一些开发者迷恋着一些CSS2代码。

本文将分享20段非常专业的CSS2/CSS3代码供大家使用,你可以把它们保存在IDE里、或者存储在CSS文档里,这些代码片段绝对会给你带来意外的惊喜。
(continue reading…)


ie6 position:fixed




    
    ie6 position fixed
    



test


























test

test

CSS图片垂直居中方法

CSS图片垂直居中方法 (continue reading…)


解决iPad(Safari)下背景图片空白或被截断的问题

页面中,顶部是一条100%宽的背景,CSS样式如下:

    #header {
    width:100%;
    height: 94px;
    background: url(/images/headerbg.gif);
    overflow: hidden;
    }

发现在iPad下右侧有些部分显示不出来,所以开始调试。
装了Windows版本的Safari测试页面后发现,初始化一个窗体宽度,然后加载页面,等到页面加载完成后再拉动水平滚动条,就会发现顶部右边的背景全变成了白色。
这个明显是Safari对背景的渲染有问题,背景的100%宽度在初始化页面时就被自动转化成固定的宽度值了,因此之后拉动滚动条,不会重新渲染。 (continue reading…)


how to get a js png fix to work on ajax calls

If you are using iepngfix.htc, you might try setting the behavior inline

var myEl = document.getElementById('inbound-ajax-element');
myEl.style.behavior = 'url(iepngfix.htc)';

http://www.twinhelix.com/css/iepngfix/demo/

 

You should take a look here jQuery IE PNG Fix Plugin

jQuery(function($) {
    $("img[@src$=png], #image-one, #image-two").pngfix();
});

You should run this on the images you just loaded.

 

demo:

 

function filterAlphaImages(){
	var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
	var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
	if (itsAllGood) {
		for (var i=0; i<document.all.length; i++){
			var obj = document.all[i];
			var bg = obj.currentStyle.backgroundImage;
			var img = document.images[i];
			if (bg && bg.match(/\.png/i) != null) {
			var img = bg.substring(5,bg.length-2);
			var offset = obj.style["background-position"];
			obj.style.filter =
			"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+img+"', sizingMethod='crop')";
			obj.style.backgroundImage = "url('fileadmin/templates/images/pixel.gif')";
			obj.style["background-position"] = offset; // reapply
			} else if (img && img.src.match(/\.png$/i) != null) {
			var src = img.src;
			img.style.width = img.width + "px";
			img.style.height = img.height + "px";
			img.style.filter =
			"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+src+"', sizingMethod='crop')"
			img.src = "fileadmin/templates/images/pixel.gif";
			}
		}
	}
}

 


css实现强制不换行/自动换行/强制换行

强制不换行
div{
white-space:nowrap;
}

自动换行
div{
word-wrap: break-word;
word-break: normal;
}

强制英文单词断行

div{
word-break:break-all;
}
(continue reading…)


让IE也有类似firebug的功能

虽然现在的浏览器都有类似firebug的功能,但也只是类似,像我们前端用得最多的功能却没有(也可能是我还不会玩吧),举个例子:我在firebug里用得最多的功能就是修改css,然后直接在页面上看到效果,而不是修改css文件后,刷新浏览器。这个功能好像除了firebug,其他的浏览器上的开发工具都没有吧,今天无意中看到了firebug lite.让IE也可以有这样的功能。以后做页面就会轻松不少,呵。 (continue reading…)


text-indent 隐藏按钮文字

1: HTML Code

Create a HTML page and insert a button with a class, “button”. (continue reading…)


浏览器对 ‘@font-face’ 规则支持的字体格式不同

标准参考

根据 CSS3 草案中的描述,’@font-face’ 规则允许使用链接到需要时自动激活的字体。这使得用户可以使用在线的字体,而不仅仅拘泥于使用用户端系统内的字体。一套对字体的描述定义了字体资源的位置,可以是本地也可以是其他地方,以及自定义个性化字体风格。

规则定义格式:

@font-face {
    descriptor: value;
    descriptor: value;
    [...]
    descriptor: value;
} (continue reading...)

css文字不换行、自动换行、强制换行

强制不换行

div{
white-space:nowrap;
}
自动换行

div{
word-wrap: break-word;
word-break: normal;
}
强制英文单词断行

div{
word-break:break-all;
}

============================================ (continue reading…)


Copyright © 1996-2010 Add Lives. All rights reserved.
iDream theme by Templates Next | Powered by WordPress