li中嵌套img导致li垂直方向下端多出4px空白边解决办法

评论(0)浏览(173)分类:HTML/CSS兼容/XML
li中嵌套img导致li垂直方向下端多出4px空白边解决办法  当li中嵌套了img元素时,li的垂直方向下端会莫名其妙的多出4px的空白边,ie6-7【以下简称ie】,firefox,chrome存在li空白边,firefox和ie6-7一样是4px,chrome下则是3px,IE8没有受到影响,神奇。。示例代码和布局图比较如下ul style=margin:0px;padding:0pxli style=margin:0px;padding:0px;zoom:1;overflow:hiddenimg src=v.png//li/ul  ..

css中table-layout:fixed结合nowrap使用示例

评论(0)浏览(41)分类:HTML/CSS兼容/XML
css中table-layout:fixed结合nowrap使用示例css table-layout:fixed使用效果:如果想要一个table固定大小,里面的文字强制换行(尤其是在一长串数字英文文本,中间无空格分隔的情况下),以达到使过长的文字不撑破表格的目的,一般是使用样式:table-layout:fixed。但是在Firefox下面,会有一些问题,参考 Gmail的一些做法,做了几个测试,得出一种解决办法。例1:(IE浏览器)普通的情况table..

CSS3 transform制作的Windows徽标

评论(0)浏览(48)分类:HTML/CSS兼容/XML
CSS3 transform制作的Windows徽标  CSS3 transform制作的Windows徽标,使用IE9+或者chrome,firefox等测试效果style#windows .canvas { background: #fff;}#windows .icon { left:193px; position: absolute; top:20px; -moz-transform: rotate(16deg); -webkit-transform: rotate(16deg); transform: rotate(16deg);}.window-e1,.window2,.window3,..

输入框onchange,oninput,onpropertychange事件区别

评论(0)浏览(430)分类:HTML/CSS兼容/XML
输入框onchange,oninput,onpropertychange事件区别输入框(input)onchange,oninput,onpropertychange事件区别和兼容行分析onchange触发条件:输入框的值改变,失去焦点(onblur)后触发。兼容性:各浏览器都支持。oninputonpropertychange触发条件:输入时,实时触发,而不是失去焦点才触发。兼容性:oninput:Chrome/IE9/Firefox/Safari/Operaonpropertychange:IE6/IE7/IE8/IE9所以如果要实现输..

css4选择器

评论(0)浏览(17)分类:HTML/CSS兼容/XML
css4选择器来源:http://www.wheattime.com/css4-selector.htmlCSS4选择器工作草案于2011年9月29日被发布。 新增了一些内容,我们来看看是哪些:一.复合选择器1.E:not(s1, s2)  匹配所有既不包含s1选择器也不包含s2选择器的元素。是的,这个只是将css3的E:not(s)中1个参数变成2个,谁又会说这不是发展呢。例如*not(input,button)表示除input以及butto..

css修改鼠标选中内容显示样式

评论(0)浏览(81)分类:HTML/CSS兼容/XML
css修改鼠标选中内容显示样式  通过样式修改鼠标选中的内容的颜色/背景色样式,而不是默认的深蓝色蓝底白色的字。  本示例在IE8-浏览器下无效,如果是IE浏览器请升级到IE9+,chrome,opera,safari,firefox下运行看效果style*::-moz-selection{background:#93C; color:#FCF;}*::selection{background:#93C; color:#FCF;} /style通过样式修改鼠标选中的内容的颜色/背景..

CSS开启桌面端和移动端硬件加速

评论(0)浏览(29)分类:HTML/CSS兼容/XML
CSS开启桌面端和移动端硬件加速  可以在浏览器中用css开启硬件加速,使GPU (Graphics Processing Unit) 发挥功能,从而提升网站性能。  现在大多数电脑的显卡都支持硬件加速。鉴于此,我们可以发挥GPU的力量,从而使我们的网站或应用表现的更为流畅。  在桌面端和移动端用CSS开启硬件加速  CSS animations, transforms 以及 transitions 不会自动开启GPU加速,而是由浏..

让IE6支持css position:fixed定位

评论(0)浏览(61)分类:JavaScript/Ajax开发技巧
让IE6支持css position:fixed定位  IE6不支持position:fixed,IE6不支持position:fixed,解决技巧使用Internet Explorer的CSS表达式(expression)。你不可以直接使用该表达式,因为它可能会因为缓存而不更新。解决这一点的最简单的方式是使用eval动态解析执行javascript语句。  IE6下移动浮动层还会出现闪动问题,解决方法参考:解决ie下移动浮动层闪动问题  让IE6支持posi..

解决ie下移动浮动层闪动问题

评论(0)浏览(502)分类:HTML/CSS兼容/XML
解决ie下移动浮动层闪动问题  IE浏览器下如果使用setInterval/setTimeout计时器实现实时移动浮动层时,浮动层会有一些细微的闪动或者震动,因为IE有一个多步的渲染进程,当滚动或调整浏览器大小的时候,它将重置所有内容并重画页面,这个时候它就会重新处理css表达式。这会引起一个丑陋的闪动/振动bug,在此处固定位置的元素需要调整以跟上(页面的)滚动,就会出现跳动。 ..

扩展JavaScript trim,trimStart,trimEnd方法

评论(0)浏览(441)分类:JavaScript/Ajax开发技巧
扩展JavaScript trim,trimStart,trimEnd方法  javascript没有类型C#的Trim,TrimStart,TrimEnd方法去除空白字符或者指定的字符,需要自己扩展javascript的string类型的prototype增加string类型的Trim,TrimStart,TrimEnd方法。  源代码如下,来源:http://code.google.com/p/vegas/var FRL = {};FRL.strings = {};FRL.strings.whiteSpaceChars = [ \u0009 /*Horizontal tab*/ , ..

IE glow滤镜

评论(0)浏览(31)分类:HTML/CSS兼容/XML
IE glow滤镜  IE glow滤镜:在对象边缘添加类似发光效果  语法: STYLE=filter:Glow(Color=color,Strength=strength)   说明:Color:发光颜色. Strength:强度(0-100) 例子:filter:Glow(Color=#6699CC,Strength=5)   注意:作用域图片时,图片需要透明背景,要不不起作用。  IE glow滤镜测试代码和效果style body{background:#ffffff} ..

IE gray,invert,xray滤镜

评论(0)浏览(40)分类:HTML/CSS兼容/XML
IE gray,invert,xray滤镜  IE gray滤镜:把图片变为一张黑白颜色灰度图  语法::STYLE=filter:Gray  IE invert滤镜:把对象的可视化属性全部翻转,包括色彩,饱和度和亮度  语法:STYLE=filter:Invert  IE Xray滤镜:使对象变得像被x光照射一样  语法:STYLE=filter:Xray  IE gray,invert,xray滤镜测试代码和效果style body{background:#ffffff} ..

模仿淘宝文本框内容放大效果

评论(0)浏览(35)分类:JavaScript/Ajax开发技巧
模仿淘宝文本框内容放大效果  模仿淘宝的文本框内容放大效果,当输入框输入内容的时候,在文本框上部显示放大的文本框输入内容。输入框失去焦点或者内容为空时隐藏提示内容。效果如下源代码如下,兼容ie,firefox等主流浏览器,注意DOM结构。。br /br /style type=text/cssdiv.input{position:relative;width:230px;}div.input input{width:100%;border:solid 1px #0077f..

XSLT教程

评论(0)浏览(30)分类:HTML/CSS兼容/XML
XSLT教程XML文档树1)XML可以转化文档树2)XSLT对XML的转化过程内建模板规则根调用xsl:apply-templates处理根节点的儿子。处理时,使用调用时相同的模式元素调用xsl:apply-templates处理该节点的儿子。处理时,使用调用时相同的模式属性拷贝属性值到结果树,结果作为文本而不是属性节点文本拷贝文本到结果树注释不做任何事处理指令不做任何事命名空间不做..

IE Chroma滤镜

评论(0)浏览(25)分类:HTML/CSS兼容/XML
IE Chroma滤镜  IE Chroma滤镜:设置图片中指定的颜色为透明色,不显示原来的色彩语法filter:Chroma(Color=color)说明 :color:#rrggbb格式,任意. 例子:filter:Chroma(Color=#FFFFFF) 备注:经测试,对文字容器的背景色不起作用,只作用于图片 IE Chroma滤镜示例style.chroma0{filter:Chroma(Color=#ff0000)}.chroma1{filter:Chroma(Color=#008000)}/sty..

IE FlipH,FlipV滤镜

评论(0)浏览(33)分类:HTML/CSS兼容/XML
IE FlipH,FlipV滤镜  IE FlipH,FlipV滤镜:创建水平,垂直镜像语法filter:FlipVfilter:FlipHIE FlipH,FlipV滤镜示例,请在IE下运行stylebody{background:#ffffff}div{width:100px;height:100px;float:left;margin:0px 20px 20px 0px}.FlipH{filter:FlipH}.FlipV{filter:FlipV}/styledivFlipH,FlipV滤镜,原始效果/divdiv class=FlipH/作用于FlipH下的文字效果/di..

IE DropShadow滤镜

评论(0)浏览(60)分类:HTML/CSS兼容/XML
IE DropShadow滤镜  IE DropShadow滤镜:创建对象的固定影子语法filter:DropShadow(Color=color,OffX=offX,OffY=offY,Positive=positive) 说明 Color:#rrggbb格式,任意. Offx:X轴偏离值. Offy:Y轴偏离值. Positive:1或0.如果为TRUE(非0),就为任何的非透明像素建立可见的投影 如果为FASLE(0),就为透明的像素部分建立透明效果 例子:filter:DropShadow..

IE blur滤镜

评论(0)浏览(79)分类:HTML/CSS兼容/XML
IE blur滤镜  IE blur滤镜:创建高速度移动效果,即模糊效果语法filter:Blur(Add=add,Direction=direction,Strength=strength)说明 Add:是一个布尔值,一般来说,当滤镜用于图片时取0,用于文字时取1。文字设置add=1时会整个字体增加移动效果,会很模糊注意设置add的值。 Direction:模糊方向,以45度为单位改变,0为垂直向上,45向右上,90水平向右,13..

IE alpha滤镜

评论(0)浏览(40)分类:HTML/CSS兼容/XML
IE alpha滤镜  IE alpha滤镜:设置透明层次语法 filter:Alpha(Opacity=opacity,FinishOpacity=finishopacity,Style=style,StartX=startX,StartY=startY,FinishX=finishX,FinishY=finishY)说明opacity代表透明度水准。默认的范围是从0 到 100,他们其实是百分比的形式。也就是说,0代表完全透明,100代表完全不透明。finishopacity是一个可选参数,如果想要..

CSS3 transform变形使用方法示例

评论(0)浏览(75)分类:HTML/CSS兼容/XML
CSS3 transform变形使用方法示例  在CSS3中,用Transform功能可以实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形,这四种变形分别使用rotate、 scale、skew和translate这四种方法来实现。将这四种变形结合使用,就会产生不同的效果,使用顺序不同,产生的效果是不一样的。  目前浏览器支持情况:Safari 3.1+、 Chrome 8+、Firefox 4+、Opera 10+、IE9+来源:http..

FCKEditor换行br后的全角或者半角空格丢失解决办法

评论(0)浏览(197)分类:JavaScript/Ajax开发技巧
FCKEditor换行br后的全角或者半角空格丢失解决办法  今天使用FCKEditor编辑器时,从记事本中复制内容到FCKEditor编辑器中,然后在开始的文字前面打入2个全角的空格进行缩进,提交后发现除了第一个段落的全角空格保存之外,其他的段落的全角空格全部没有了。  经测试后发现,FCKEditor在W3C浏览器,如firefox,chrome,紧跟在br/换行后的全角或者半角空格在提交的时候,不知道被FCKEditor给做..

解决IE attachEvent绑定的事件中this为window问题

评论(0)浏览(150)分类:JavaScript/Ajax开发技巧
解决IE attachEvent绑定的事件中this为window问题  在IE浏览器下使用attachEvent绑定对象的事件时,绑定的事件方法中this对象为window对象,而不是当前的DOM对象。w3c浏览器下的addEventListener对象不存在这种问题。  测试代码如下div id=dv111/divscriptfunction Alert(){alert(this.innerHTML)}var dvs=document.getElementById('dv')dv.attachEvent('onclick',Alert);/..

submit控件click事件和form表单submit事件执行循序

评论(0)浏览(2969)分类:JavaScript/Ajax开发技巧
submit控件click事件和form表单submit事件执行循序  表单中的submit按钮的clic事件优先于表单form的submit事件,表单submit事件的执行依据submit按钮的返回值来判断是否继续需要执行submit事件。表单的submit事件中return false也可以阻止表单的提交,而不一定依靠onsubmit事件返回false来阻止表单的提交。  当submit的click事件返回false时,不会执行form表单的submit事件,返回非false值或..

iframe嵌套图吧地图在线标点地图

评论(0)浏览(81)分类:HTML/CSS兼容/XML
iframe嵌套图吧地图在线标点地图  图吧地图在线标点地图在线生成地址:http://union.mapbar.com/onlineTagging.jsp,注册激活账户后生成地图标注界面如下  图吧在线标点地图需要注册才能生成iframe引用的地址,效果如下。  iframe引入的图吧在线标点地图效果

javascript代码排版,压缩,eval加密解密工具

评论(0)浏览(65)分类:JavaScript/Ajax开发技巧
javascript代码排版,压缩,eval加密解密工具  转载一个来自百度的javascript代码排版,压缩,eval加密解密工具,很好用。  格式化、压缩、eval压缩JS/HTML代码。格式化即按标准代码格式化代码;普通压缩,及删除代码间间距以节约资源;eval压缩,及将Javascript代码转换成eval的方式;还原eval即从eval的方式代码还原到原生代码。工具地址:http://app.baidu.com/app/enter?appid=1213..

jquery mouseleave事件:移动到子容器select的option上也会触发

评论(0)浏览(418)分类:HTML/CSS兼容/XML
jquery mouseleave事件:移动到子容器select的option上也会触发  当使用jquery给父容器绑定了mouseleave事件时,只有离开了父容器对象才会触发mouseleave事件,移动到子对象容器是不会触发的【注意不要使用mouseout事件,要不即使移动到的是父容器的子对象,如a也会触发mouseout事件。】  但是今天碰到了一个特例,如果父容器中包含select对象,当展开select对象的option时,鼠标移动到option选项上,父容..

css text-transform属性介绍

评论(1)浏览(48)分类:HTML/CSS兼容/XML
css text-transform属性介绍CSS text-transform 属性定义和用法text-transform 属性控制文本的大小写。说明这个属性会改变元素中的字母大小写,而不论源文档中文本的大小写。如果值为 capitalize,则要对某些字母大写,但是并没有明确定义如何确定哪些字母要大写,这取决于用户代理如何识别出各个词。默认值:none继承性:yes版本:CSS1JavaScript 语法:object.style.text..

css控制英文字母的大小写

评论(0)浏览(436)分类:HTML/CSS兼容/XML
css控制英文字母的大小写  css如何控制英文字母的大小写style.uc{text-transform:uppercase;/*用此样式后英文字母都显示为大写*/}.lc{text-transform:lowercase;/*用此样式后英文字母都显示为小写*/}/stylediv class=ucall the english word in this div be changed to upper case/divbr /div class=lcall the english word in this div be changed to lower case/div

CSS3 @font-face简介

评论(0)浏览(39)分类:HTML/CSS兼容/XML
CSS3 @font-face简介  @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许多人会不自然的问,这样的东西IE能支持吗?当我告诉大家@font-face这个功能早在IE4就支持了你肯定会感到惊讶。我的Blog就使用了许多这样的自定义Web字体,比如说..

CSS固定表格table表头页头

评论(0)浏览(553)分类:HTML/CSS兼容/XML
CSS固定表格table表头页头  纯css实现的固定表格table页头表头固定,内容可以滚动,而table的表头固定在上面,效果如下源代码如下 !doctype htmlhtml dir=ltr lang=zh-CN head meta charset=utf-8/ title纯CSS实现表头固定 by 司徒正美/title style type=text/css #scrollTable { width:701px; border: 1px solid #EB8;/*table没有外围的..