css使内外容器等高

在web开发中有时候需要是被包裹的容器与包裹的容器等高,在非ie6的情况下可以使用外层容器相对定位,内层容器绝对定位并设置内层容器的高度为100%来实现;但在ie6下即使你设置了height=100%依然无效;原因是在ie6下要使内层元素的高度为100%,外层元素必须要设置一个固定的高度(但实际情况是外层元素是被撑开的,这个高度也就无法固定了),难道就没有办法了么?当然不是,我们可以使用css中的_height:expression(document.getElementById(‘div2′).offsetHeight+”px”);通过js动态获取外层元素的高度。当然这个地方的js也可以jquery的代码,前提是你要先引入jquery的库文件。

下载demo:ie6-height

jquery表单验证插件jquery-validate

给大家推荐一款好用的表单验证插件,jquery validate,官方地址:
http://jqueryvalidation.org/

默认验证规则:

(1)required:true 必输字段
(2)remote:”check.php” 使用ajax方法调用check.php验证输入值
(3)email:true 必须输入正确格式的电子邮件
(4)url:true 必须输入正确格式的网址
(5)date:true 必须输入正确格式的日期 日期校验ie6出错,慎用
(6)dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性
(7)number:true 必须输入合法的数字(负数,小数)
(8)digits:true 必须输入整数
(9)creditcard: 必须输入合法的信用卡号
(10)equalTo:”#field” 输入值必须和#field相同
(11)accept: 输入拥有合法后缀名的字符串(上传文件的后缀)
(12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
(13)minlength:10 输入长度最小是10的字符串(汉字算一个字符)
(14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串”)(汉字算一个字符)
(15)range:[5,10] 输入值必须介于 5 和 10 之间
(16)max:5 输入值不能大于5
(17)min:10 输入值不能小于10

默认提示:

messages: {
required: “This field is required.”,
remote: “Please fix this field.”,
email: “Please enter a valid email address.”,
url: “Please enter a valid URL.”,
date: “Please enter a valid date.”,
dateISO: “Please enter a valid date (ISO).”,
dateDE: “Bitte geben Sie ein g眉ltiges Datum ein.”,
number: “Please enter a valid number.”,
numberDE: “Bitte geben Sie eine Nummer ein.”,
digits: “Please enter only digits”,
creditcard: “Please enter a valid credit card number.”,
equalTo: “Please enter the same value again.”,
accept: “Please enter a value with a valid extension.”,
maxlength: $.validator.format(“Please enter no more than {0} characters.”),
minlength: $.validator.format(“Please enter at least {0} characters.”),
rangelength: $.validator.format(“Please enter a value between {0} and {1} characters long.”),
range: $.validator.format(“Please enter a value between {0} and {1}.”),
max: $.validator.format(“Please enter a value less than or equal to {0}.”),
min: $.validator.format(“Please enter a value greater than or equal to {0}.”)
},
如需要修改,可在js代码中加入:
jQuery.extend(jQuery.validator.messages, {
required: “必选字段”,
remote: “请修正该字段”,
email: “请输入正确格式的电子邮件”,
url: “请输入合法的网址”,
date: “请输入合法的日期”,
dateISO: “请输入合法的日期 (ISO).”,
number: “请输入合法的数字”,
digits: “只能输入整数”,
creditcard: “请输入合法的信用卡号”,
equalTo: “请再次输入相同的值”,
accept: “请输入拥有合法后缀名的字符串”,
maxlength: jQuery.validator.format(“请输入一个 长度最多是 {0} 的字符串”),
minlength: jQuery.validator.format(“请输入一个 长度最少是 {0} 的字符串”),
rangelength: jQuery.validator.format(“请输入 一个长度介于 {0} 和 {1} 之间的字符串”),
range: jQuery.validator.format(“请输入一个介于 {0} 和 {1} 之间的值”),
max: jQuery.validator.format(“请输入一个最大为{0} 的值”),
min: jQuery.validator.format(“请输入一个最小为{0} 的值”)
});
推荐做法,将此文件放入messages_cn.js中,在页面中引入
<script src=”messages_cn.js” type=”text/javascript”></script>

下载地址:validate

光标在文本框中的大小在各个浏览器表现不一致的解决方案

今天有人问了谷歌和火狐下input输入框中的光标大小显示不一致,之前都没遇到过这~把人家的解决方法转过来先~~~
以前在项目里碰到过一个问题
input输入框用一个背景图模拟,设置height和line-height一样的高度,使里面的输入文字能够居中,

在FF下出现的情况是:点击input时,输入光标其实上跟input的height一样高,但当开始输入文字时,光标又变得跟文字一样高,

chrome下光标跟input的height一样高,

而IE下光标跟文字的大小一致。

一直没弄明白为什么这样子,今天听罗浮宫里的同学一讨论,才知道原因所在。

初步结论如下:

IE:不管该行有没有文字,光标高度与font-size一致。

FF:该行有文字时,光标高度与font-size一致。该行无文字时,光标高度与input的height一致。

Chrome:该行无文字时,光标高度与line-height一致;该行有文字时,光标高度从input顶部到文字底部(这两种情况都是在有设定line-height的时候),如果没有line-height,则是与font-size一致。

解决的方案:
给input的height设定一个较小的高度,然后用padding去填充,基本上可以解决所有浏览器的问题

input{
height: 16px;
padding: 4px 0px;
font-size: 12px;
}

drupal中jquery的使用方法

drupal在核心文件中是包含了jquery库文件的,但是无法使用,一下是解决办法。

第一种方式:

(function ($) {
//你的jquery代码
})(jQuery);

例如:

(function ($) {
$(function(){
$(‘.submit’).hover(function(){
$(this).addClass(‘btn-change’);
},function(){
$(this).removeClass(‘btn-change’);
});
});
})(jQuery);

 

第二种方式:

var $ = jQuery.noConflict();
//你的jquery代码

例如:

var $ = jQuery.noConflict();
$(function(){
$(‘.submit’).hover(function(){
$(this).addClass(‘btn-change’);
},function(){
$(this).removeClass(‘btn-change’);
});
})

 

IE6、IE7、IE8、Firefox兼容性CSS HACK代码

1.区别IE和非IE浏览器CSS HACK代码

 #divcss5{
background:blue; /*非IE 背景藍色*/
background:red \9; /*IE6、IE7、IE8背景紅色*/
}

 

2.区别IE6,IE7,IE8,FF CSS HACK
【区别符号】:「\9」、「*」、「_」
【示例】:

 #divcss5{
background:blue; /*Firefox 背景变蓝色*/
background:red \9; /*IE8 背景变红色*/
*background:black; /*IE7 背景变黑色*/
_background:orange; /*IE6 背景变橘色*/
}

【说明】:因为IE系列浏览器可读「\9」,而IE6和IE7可读「*」(米字号),另外IE6可辨识「_」(底线),因此可以依照顺序写下来,就会让浏览器正确的读取到自己看得懂得CSS语法,所以就可以有效区分IE各版本和非IE浏览器(像是Firefox、Opera、Google Chrome、Safari等)。

 

3.区别IE6、IE7、Firefox (EXP 1)
【区别符号】:「*」、「_」
【示例】:

 #divcss5{
background:blue; /*Firefox背景变蓝色*/
*background:black; /*IE7 背景变黑色*/
_background:orange; /*IE6 背景变橘色*/
}

【说明】:IE7和IE6可读「*」(米字号),IE6又可以读「_」(底线),但是IE7却无法读取「_」,至于Firefox(非IE浏览器)则完全无法辨识「*」和「_」,因此就可以透过这样的差异性来区分IE6、IE7、Firefox

 

4.区别IE6、IE7、Firefox (EXP 2)
【区别符号】:「*」、「!important」
【示例】:

 #divcss5{
background:blue; /*Firefox 背景变蓝色*/
*background:green !important; /*IE7 背景变绿色*/
*background:orange; /*IE6 背景变橘色*/
}

【说明】:IE7可以辨识「*」和「!important」,但是IE6只可以辨识「*」,却无法辨识「!important」,至于Firefox可以读取「!important」但不能辨识「*」因此可以透过这样的差异来有效区隔IE6、IE7、Firefox。

 

5.区别IE7、Firefox
【区别符号】:「*」、「!important」
【示例】:

 #divcss5{
background:blue; /*Firefox 背景变蓝色*/
*background:green !important; /*IE7 背景变绿色*/
}

【说明】:因为Firefox可以辨识「!important」但却无法辨识「*」,而IE7则可以同时看懂「*」、「!important」,因此可以两个辨识符号来区隔IE7和Firefox。

 

6.区别IE6、IE7 (EXP 1)
【区别符号】:「*」、「_」
【示例】:

 #tip {
*background:black; /*IE7 背景变黑色*/
_background:orange; /*IE6 背景变橘色*/
}

【说明】:IE7和IE6都可以辨识「*」(米字号),但IE6可以辨识「_」(底线),IE7却无法辨识,透过IE7无法读取「_」的特性就能轻鬆区隔IE6和IE7之间的差异。

 

7.区别IE6、IE7 (EXP 2)
【区别符号】:「!important」
【示例】:

 #divcss5{
background:black !important; /*IE7 背景变黑色*/
background:orange; /*IE6 背景变橘色*/
}

【说明】:因为IE7可读取「!important;」但IE6却不行,而CSS的读取步骤是从上到下,因此IE6读取时因无法辨识「!important」而直接跳到下一行读取CSS,所以背景色会呈现橘色。

 

8.区别IE6、Firefox
【区别符号】:「_」
【示例】:

 #divcss5{
background:black; /*Firefox 背景变黑色*/
_background:orange; /*IE6 背景变橘色*/
}

【说明】:因为IE6可以辨识「_」(底线),但是Firefox却不行,因此可以透过这样的差异来区隔Firefox和IE6,有效达成CSS hack。

IE6下常见的兼容性问题

1、根据不同的版本加载不同的css文件
<!–[if lte IE 6]> 这段文字仅显示在 IE6及IE6以下版本。 <![endif]–>
<!–[if gte IE 6]> 这段文字仅显示在 IE6及IE6以上版本。 <![endif]–>
<!–[if gt IE 6]> 这段文字仅显示在 IE6以上版本(不包含IE6)。 <![endif]–>
<!–[if IE 5.5]> 这段文字仅显示在 IE5.5。 <![endif]–>
<!–在 IE6及IE6以下版本中加载css–>
<!–[if lte IE 6]> <link type=”text/css” rel=”stylesheet” href=”css/ie6.css” mce_href=”css/ie6.css” /><![endif]–>
缺点是在IE浏览器下可能会增加额外的HTTP请求数。

2、CSS选择器区分
IE6不支持子选择器;先针对IE6使用常规申明CSS选择器,然后再用子选择器针对IE7+及其他浏览器。

3、最小高度
ie6不支持min-height属性,但它会将height直接作为最小高度,解决办法:
#container {min-height:200px; _height:200px;}

4、在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法:
div{margin:30px!important;margin:28px;}

5、100% 高度
在IE6下,如果要给元素定义100%高度,必须要明确定义它的父级元素的高度,如果你需要给元素定义满屏的高度,就得先给html和body定义height:100%;

6、双边距Bug
当元素浮动时,IE6会错误的把浮动方向的margin值双倍计算。需要将浮动元素设置{display:none;}来解决。

7、css透明的问题
IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF:opacity:0.6。
[注] 最好两个都写,并将opacity属性放在下面。

8、css圆角
IE:ie7以下版本不支持圆角。
FF: -moz-border-radius:4px,或者-moz-border-radius-topleft:4px;-moz- border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz- border- radius- bottomright:4px;。
[注] 圆角问题是CSS中的经典问题,建议使用JQuery框架集来设置圆角,让这些复杂的问题留给别人去想吧。不过jQuery的圆角只看到支持整个区域的圆角,没有支持边框的圆角,不过这个边框的圆角可以通过一些简单的手段来实现。

9、cursor:hand VS cursor:pointer
问题说明:firefox不支持hand,但ie支持pointer ,两者都是手形指示。
解决方法:统一使用pointer。

10、字体大小定义不同
对字体大小small的定义不同,Firefox中为13px,而IE中为16px,差别挺大。
解决方法:使用指定的字体大小如14px。

11、ul和ol列表缩进问题
消除ul、ol等列表的缩进时,样式应写成:list-style:none;margin:0px;padding:0px;
其中margin属性对IE有效,padding属性对FireFox有效。
[注]经验证,在IE中,设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点,设置padding对样式没有影响;在 Firefox 中,设置margin:0px仅仅可以去除上下的空白,设置padding:0px后仅仅可以去掉左右缩进,还必须设置list- style:none才 能去除列表编号或圆点。也就是说,在IE中仅仅设置margin:0px即可达到最终效果,而在Firefox中必须同时设置margin:0px、 padding:0px以及list-style:none三项才能达到最终效果。

可打印js对象和数组的函数

在调试js代码的时候有时候需要打印js的数组或者对象,我们可以使用下面的这个插件,先再页面上加载这个插件,然后直接调用jsdebug()这个函数就可以看到你的数组数据了,

下载地址:jsdebug

js中setInterval与setTimeout用法

setTimeout

 定义和用法: setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式。  
    语法:setTimeout(code,millisec)   
    参数:   
    code (必需):要调用的函数后要执行的 JavaScript 代码串。   
    millisec(必需):在执行代码前需等待的毫秒数。  
    提示:setTimeout() 只执行 code 一次。如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。

setInterval定义和用法

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

语法

setInterval(code,millisec[,"lang"])
参数 描述
code 必需。要调用的函数或要执行的代码串。
millisec 必须。周期性执行或调用 code 之间的时间间隔,以毫秒计。

返回值

一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。

css文字竖排

<!DOCTYPE html>
<html>
<head>
<title>竖向排列的文字</title>
<style>
h1 {
width: 50px;
font-size: 30px;
word-wrap: break-word;
letter-spacing: 20px;
}
</style>
</head>
<body>
<h1>北京天安门广场红旗飘扬</h1>
</body>
</html>

css透明

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>半透明div</title>
<style>
#div1 { margin:0px auto; width:500px; height:370px ; text-align:center; background:url(/jscss/demoimg/wall3.jpg);}
#div2 { height:330px; filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;z-index:100; background-color:#ffffff; }
</style>
</head>
<body>
<div id=”div1″>
<div style=”padding:20px;”><div id=”div2″>这里是透明的DIV</div></div>
</div>
</body>
</html>