IE下使用透明滤镜出现锯齿解决办法

评论(0)浏览(229)分类:HTML/CSS兼容/XML
IE下使用透明滤镜出现锯齿解决办法  IE浏览器下使用alpha透明滤镜时,文字或者图片边缘会出现锯齿,测试代码!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=http://www.w3.org/1999/xhtmlheadmeta http-equiv=Content-Type content=text/html; charset=utf-8 /titleIE下使用透明滤镜出现锯齿..

IE6 float margin双倍增加

评论(0)浏览(68)分类:HTML/CSS兼容/XML
IE6 float margin双倍增加  IE6浏览器下面如果设置了margin,并且float为left时,则左边的margin,即margin-left会双倍增加body style=margin:0px;div style=margin:10px;float:left;border:solid 1px black;width:100px;height:100px;/div/body  解决办法就是增加display:inline即可解决ie6下的float:left左边浮动时margin-left双倍增加的问题。body style=margin:0..

DOCTYPE xhtml对body高度影响

评论(0)浏览(271)分类:HTML/CSS兼容/XML
DOCTYPE xhtml对body高度影响  xhtml申明css1compat模式下,body没有内容,IE,chrome下点击时无法响应事件,但是firefox会响应,即使document.body.clientHeight不为0,firefox的bug? !doctype htmltitlecss1compat模式下,body没有内容,IE,chrome下点击时无法响应事件,但是firefox会响应,即使document.body.clientHeight不为0,firefox的bug?。。/titlescript typ..

CSS3动画教程

评论(0)浏览(213)分类:HTML/CSS兼容/XML
CSS3动画教程  CSS3的属性比如 border-radius 、 box-shadow 和 text-shadow 在webkit(Safari、Chrome等)和Gecko(Firefox)等先进的浏览器中的使用开始出现增长的势头。它们(这些CSS属性)已经为用户创建更轻量的页面和更丰富的体验,而且它们可以优雅的降级。然而,这些只是CSS 3能为我们做的众多事情中的一小部分。  在本文中,我们将走的更远,看一看 变..

淘宝导航小箭头翻转效果

评论(0)浏览(395)分类:HTML/CSS兼容/XML
淘宝导航小箭头翻转效果  淘宝网站小箭头css3动画效果源代码,请使用webkit/Gecko核心浏览器运行示例查看效果!DOCTYPE htmlhtmlhead meta http-equiv=content-type content=text/html; charset=UTF-8 titlecss3 animation demo @ taobao - jsFiddle demo/title script type='text/javascript' src='http://fiddle.jshell.net//js/lib/mootools-1.2...

html5 ajax上传文件asp.net示例

评论(0)浏览(6559)分类:JavaScript/Ajax开发技巧
html5 ajax上传文件asp.net示例  在Gecko(firefox4+)和webkit(chrome)核心的浏览器中存在FormData对象,可以收集表单中的文件内容,结合ajax对象XMLHttpRequest就可以无刷新的上传文件了。FormData对象实例有一个方法叫做append,允许加入任何形式的数据(文本和文件)的对象。不过悲催的是IE9虽然支持html5,但是没有FormData对象。  测试代码html xmlns=http://www...

canvas getContext对象方法和属性详细介绍

评论(0)浏览(2245)分类:JavaScript/Ajax开发技巧
canvas getContext对象方法和属性详细介绍1.globalAlpha 属性,设置透明效果function draw() { var ctx = document.getElementById('canvas').getContext('2d'); // 画矩形 ctx.fillStyle = '#FD0'; ctx.fillRect(0,0,75,75); ctx.fillStyle = '#6C0'; ctx.fillRect(75,0,75,75); ctx.fillStyle = '#09F)'; ctx.fillRect(0,75,75,75); ..

firefox/chrome动态设置script加载js文件失败

评论(0)浏览(670)分类:HTML/CSS兼容/XML
firefox/chrome动态设置script加载js文件失败  firefox,chrome等w3c浏览器下面,设置script标签的src来动态加载js文件时,有2中情况1)如果script标签已经加载过js文件,那么重新设置为其他js文件的路径时,无法加载这个js文件。2)如果未加载过js文件,是一个空的script标签,那么第一次设置src时可以加载这个js文件,第二次设置就没用办法加载指定的js文件了。  即使增加时间戳也不行..

HTML5 Geolocation获取地理位置

评论(0)浏览(263)分类:HTML/CSS兼容/XML
HTML5 Geolocation获取地理位置   Geolocation API用于将用户当前地理位置信息共享给信任的站点,这涉及用户的隐私安全问题,所以当一个站点需要获取用户的当前地理位置,浏览器会提示用户是允许 or 拒绝。  哪些浏览器支持Geolocation API:IE9.0+、FF3.5+、Safari5.0+、Chrome5.0+、Opera10.6+、IPhone3.0+、Android2.0+,也就是说除IE6~IE8外,其它最新的浏览器基本上..

淘宝广告主后台导航jQuery插件

评论(0)浏览(95)分类:HTML/CSS兼容/XML
淘宝广告主后台导航jQuery插件  淘宝广告主后台导航效果,用jQuery写的插件  配置说明fx:动画效果,默认linear,还可以设置为easein,easeout等。。具体看代码里面扩展的jQuery.easingspeed:动画时间,默认500msclick:点击导航后的回调函数,默认空函数  源代码如下!DOCTYPE HTML PUBliC -//W3C//DTD HTML 4.0 Transitional//ENhtmlheadtitle淘宝广告主后台导航jQue..

谷歌导航条jQuery插件

评论(0)浏览(52)分类:HTML/CSS兼容/XML
谷歌导航条jQuery插件  本站页头的谷歌导航条效果,使用了jQuery框架,源代码如下!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=http://www.w3.org/1999/xhtmlheadmeta http-equiv=content-type content=text/html;charset=utf-8 /title谷歌导航条jQuery插件-编程设计网/title..

HTML5连接SqlLite示例

评论(0)浏览(962)分类:JavaScript/Ajax开发技巧
HTML5连接SqlLite示例  按照国内一HTML5先行者的例子仿写了一个用HTML5 API来操作本地SQLite数据库的例子,感觉这个功能蛮好玩的,但是还不够强大,尤其浏览器支持力度不够: !DOCTYPE html head meta charset=UTF-8 title使用HTML5本地数据库DEMO/title script type=text/javascript src=js/operateDB.js//script /head body onl..

canvas对象drawImage方法

评论(0)浏览(278)分类:HTML/CSS兼容/XML
canvas对象drawImage方法  canvas对象drawImage方法是canvas导入图片的一种方法,他有三种重载形式:drawImage(image,x,y)drawImage(image,x,y,width,height):伸缩drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,destX,destY,destWidth,destHeight):剪切伸缩  其中第一个参数image可以是page中的img元素,也可以是其他canvas元素,base64编码的URL或vide..

canvas的translate、scale、rotate方法介绍

评论(0)浏览(401)分类:HTML/CSS兼容/XML
canvas的translate、scale、rotate方法介绍1.translate(x,y):平移,将画布的坐标原点向左右方向移动x,向上下方向移动y.canvas的默认位置是在(0,0). 例子:画布原点假如落在(1,1),那么translate(10,10)就是在原点(1,1)基础上分别在x轴、y轴移动10,则原点变为(11,11)。2.scale(x,y):扩大。x为水平方向的放大倍数,y为竖直方向的放大倍数。3.rotate(angel):旋转.angle指旋..

css控制文本反方向显示

评论(0)浏览(190)分类:HTML/CSS兼容/XML
css控制文本反方向显示  CSS属性:unicode-bidi 设置文本的方向,也就是将文字的方向倒过来。如123456,显示为654321  尽管 CSS 试图处理书写方向,但 Unicode 有一种更健壮的方式来处理方向性。利用属性 unicode-bidi,CSS 创作人员可以充分利用 Unicode 的某些功能。可能的值:normal,embed,bidi-override实现此效果的代码:span style=unicode-b..

javascript实现IE,firefox客户端图片预览

评论(0)浏览(240)分类:JavaScript/Ajax开发技巧
javascript实现IE,firefox客户端图片预览  javascript实现IE,firefox客户端图片预览,测试浏览器:IE6~8,firefox4.0。  google的chrome,safari,opera浏览器需要上传图片才行,这个不在讨论范围,上传后也变简单多了,将表单自动提交到隐藏iframe实现无刷新上传图片文件后,在服务器端保存图片然后返回路径,具体参考这篇文章:ajax无刷新上传文件,使用iframe模仿。  原理:由..

IE浏览器下获取file控件选择本地文件的路径

评论(0)浏览(2299)分类:JavaScript/Ajax开发技巧
IE浏览器下获取file控件选择本地文件的路径  由于安全问题,IE7+浏览器的internet区域的安全设置中将文件上传到服务器时包含本地目录路径选项默认是禁用的,所以通过file.value得到的不是实际选择的本地文件的路径,而是定位到c:\fjkk\等乱七八糟的路径去,文件名是正确的,路径不正确。  IE浏览器下面可以使用selection对象获取到真实的本地选择文件的路径,firefox需要设置安全性,..

ie margin top失效当前一个节点display为absolute

评论(0)浏览(193)分类:HTML/CSS兼容/XML
ie margin top失效当前一个节点display为absolute  在IE浏览器下面,某个节点设置了margin-top和height属性时,如果此节点的上一个兄弟节点的display为absolute,这个节点的margin-top会失效。去掉这个节点的height属性后,margin-top又起作用了。  解决办法1)将绝对定位的节点放到所有兄弟节点的最后,这样在display为absolute前面设置过height的兄弟节点的margin-top就不会失效了。2)给..

2个并排input在XHTML摸下下IE下输入中文导致offset增加bug

评论(1)浏览(399)分类:HTML/CSS兼容/XML
2个并排input在XHTML摸下下IE下输入中文导致offset增加bug  在IE浏览器下面,当文档申明为xhtml时,2个并排的在一起的输入控件,当一个输入框内容为非中文内容,另外一个为中文时,出现奇怪的问题。测试代码在最后1)IE8浏览器下面顶部会出现2px差距,没有对齐,并且输入框内的文字没有对齐,中文接近顶部,非中文内容和中文内容相差2px左右,如图一。图一2)IE7浏览器下面顶部对齐,但是输入框内的文..

Firefox下margin-top负值失效

评论(0)浏览(723)分类:HTML/CSS兼容/XML
Firefox下margin-top负值失效  在csdn看到一个问题:firefox浏览器下面,当设置一个容器内的子元素的margin-top为负值时,如果负值的绝对值超过容器的高度,结果不是完全隐藏了图片,而子元素会显示出margin-top设置的绝对值-容器高度这么多的内容。网上找了下据说是firefox特有的块级盒模型相邻的垂直margin会被折叠的问题。  测试代码如下,firefox和其他浏览器的表示..

javascript动态给图片添加热点

评论(0)浏览(548)分类:HTML/CSS兼容/XML
javascript动态给图片添加热点  由于图片的热点一般都是写死在HTML源代码里面了,所以如果有多张独立的图片需要增加热点,而且需要根据条件显示或者隐藏其中的某些图片时,这样图片的位置就会发生变动,从而导致添加的热点对不上原图片的位置而导致失效或者乱套了。下面为1张图片拆分成4张进行热点操作。  前提条件:热点是规则的长方形或者正方形,不能是三角形或者菱形..

textarea设置下划线格式

评论(0)浏览(2893)分类:HTML/CSS兼容/XML
textarea设置下划线格式功能要求:1:如何实现在多行文本框textarea里面每一行下面都有一条横线 2:textarea文本框里面有一段不能删掉实现方法:横线用背景图片来做,不动的文字用浮动层+给textarea增加text-indent来实现缩进。源代码如下:style type=text/css.input{position:relative}.word{position:absolute;line-height:20px;left:0px;top:1px;z-index:10;backgr..

隐藏IE textarea控件滚动条

评论(0)浏览(178)分类:HTML/CSS兼容/XML
隐藏IE textarea控件滚动条  IE浏览器下面textarea即使没有内容,也会在右边显示一个灰色的滚动条,如下图所示  在IE下要隐藏textarea的滚动条,只需要增加style=overflow:hidden或者auto就可以隐藏灰色滚动条了。textarea rows=5 cols=50 style=overflow:auto/textarea

浮动层没有内容在IE下失效bug

评论(0)浏览(164)分类:HTML/CSS兼容/XML
浮动层没有内容在IE下失效bug  问题描述:在IE浏览器下,浮动层如果没有内容或者未设置过背景之类,当这个层浮动在正常内容的上面时,添加到浮动层上面的事件,如 click,mouseover等事件,当触发点在有正常内容的部分,不会响应事件,只有在没有内容的部分才会响应事件。其他浏览器如 firefox,chrome不会出现这种问题。  通过IE的开发人员工具得到下图  点击蓝色框框..

图片显示十字交叉线,随鼠标移动效果

评论(0)浏览(271)分类:JavaScript/Ajax开发技巧
图片显示十字交叉线,随鼠标移动效果  功能描述:显示十字线在图片上,十字线交叉中心为鼠标所在位置,十字线随鼠标移动而更改位置  查看效果点击这里  源代码如下style type=text/css#dv{position:relative;}#linex{height:1px;width:300px;position:absolute;left:0px;background:#000;overflow:hidden;display:none;}#liney{height:300px;width:1px;position:absolute;top..

HTML5 history对象新方法pushState/replaceState

评论(0)浏览(524)分类:JavaScript/Ajax开发技巧
HTML5 history对象新方法pushState/replaceState    window.location在通过JavaScript更改以后,浏览器都会通过刷新来到达你更改后的URL。    而在JavaScript MVC开始流行之后,通过刷新来修改URL的方法,不禁让人感到烦躁。然而HTML5中就制定了一个这样的API,可以通过方法的方式来修改URL,而又不会使浏览器刷新,就是History API。    熟悉JavaScript开发的同学,对History肯定不会陌..

hta更改窗体大小再屏幕居中

评论(0)浏览(549)分类:HTML/CSS兼容/XML
hta更改窗体大小再屏幕居中  hta其实就是后缀名为.hta的html文件,只是多增加了HTA:APPLICATION标签控制,具体参考hta使用帮助。  既然是html文件,就会支持javascript或者vbscript代码【MS的东西,不支持vbs就好笑了】,所以可以使用javascript方法的resizeTo方法更改窗体大小。script type=text/javascriptvar htaHeight=200//hta高度,htaWidth=300//hta宽度,window..

IE css expression中获取scrollTop属性

评论(0)浏览(505)分类:JavaScript/Ajax开发技巧
IE css expression中获取scrollTop属性  今天在做一个浮动效果,由于IE6-不支持position:fixed,所以就对IE6-浏览器可以考虑使用IE专有css行为expression+position:absolute来实现。下面的代码全部在IE6-浏览器下测试。  HTML结构div class=ieexp浮动层/div  开始定义样式如下.ieexp{top:expression(document.body.scrollTop);left:0px;}  结果发现浮动层在IE下固定在了顶部,..

offsetParent属性介绍

评论(0)浏览(579)分类:JavaScript/Ajax开发技巧
offsetParent属性介绍  offsetParent属性,在IE有那么几种模式,offsetParent.tagName返回的到底是什么,经过测 试,以某元素A为例,如果A是body元素,返回的是null。得到结果如下图所示:  说明:diplay为空表示元素显示不是none;position这列中的self,father,grandfather,root是 指元素A自身,A的父元素,一直到A的根元素。offsetParent和position是否定位,d..

html if语句使用

评论(0)浏览(235)分类:JavaScript/Ajax开发技巧
html if语句使用  if语句的代码的语法非常简单,就是一个 if 判断语句来判断浏览器的类型和版本,使用类似 !--[if lte IE 6] 和 ![endif]-- 语法结构包含起来,代表如果浏览器是 IE 并且版本号低于或等于 6.0 则进行提示。类似的语法还有:!--[if IE]这样使用IE浏览器(全部版本)的人都看得到。![endif]--!--[if IE 6]这样IE 6.0版本会看得到,只限IE 6.0版本..