禁止textarea拖拽更改大小

评论(0)浏览(379)分类:HTML/CSS兼容/XML
禁止textarea拖拽更改大小  textarea在高版本的Firefox,chrome等浏览器下,textarea会在右下角出现一个小图标,拖动图标可以更改textarea的大小。textarea style=width:300px;height:100px;/textarea  要想拖动textarea右下角图标更改textarea大小,可以增加resize:no属性,textarea就不可以拖动更改大小了,右下角的图标也消失不见。textarea style=width:300px;he..

DXImageTransform.Microsoft.Matrix滤镜

评论(0)浏览(377)分类:HTML/CSS兼容/XML
DXImageTransform.Microsoft.Matrix滤镜DXImageTransform.Microsoft.Matrix滤镜实现对象内容的改变尺寸、旋转、上下或左右反转。 使用此滤镜可以建立下列效果: 左右反转。将 M11 和 M12 的值取负。 上下反转。将 M21 和 M22 的值取负。 改变尺寸。将 M11 和 M12 和 M21 和 M22 的值乘以相同的因数。对象内容尺寸会按比例增大或缩小。IE矩阵滤镜Matrix旋转与缩放及结合transform的拓展..

CSS选择器优先级

评论(0)浏览(376)分类:HTML/CSS兼容/XML
CSS选择器优先级CSS样式的优先级  多重样式(Multiple Styles):如果外部样式、内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况。 一般情况下,优先级如下:(外部样式)External style sheet (内部样式)Internal style sheet (内联样式)Inline style  有个例外的情况,就是如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式。..

body高度为0但是背景色填充整个浏览器

评论(0)浏览(371)分类:HTML/CSS兼容/XML
body高度为0但是背景色填充整个浏览器  给body元素设置背景色,但是body没有内容,高度没有填充整个浏览器情况下,浏览器整个窗口都是body设置的背景色,这个是什么导致的?  测试代码如下啥???body高度才28(默认margin 8x2+padding 5x2+border 1x2)??那整个浏览器的颜色是哪里来的????? !doctype htmlstyle body{background:#f00;border:solid 1px #000;padding..

禁止选择网页内容

评论(0)浏览(369)分类:HTML/CSS兼容/XML
禁止选择网页内容  用css禁止选择浏览器显示的网页的内容user-select有两个值none:用户不能选择文本text:用户可以选择文本  注意:user-select不是一个W3C的CSS标准属性,浏览器支持的不完善,各种浏览器的实现都不一样,需要针对不同浏览器加上对应的CSS,示例代码如下 body{ -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*we..

canvas的translate、scale、rotate方法介绍

评论(0)浏览(361)分类: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指旋..

如何实现上传拖拽进入浏览器的文件

评论(0)浏览(357)分类:HTML/CSS兼容/XML
如何实现上传拖拽进入浏览器的文件  通过HTML5的文件API ,Firefox、Chrome等浏览器已经支持从操作系统直接拖拽文件进入浏览器,并上传到服务器。  让我们看一下Firefox 是如何使用拖拽上传功能的:  1)首先提供一个区域来放置文件div name=image id=dropbox style=min-width:300px;min-height:100px;border:3px dashed silver;/div2)然后监听拖拽过程中的dragenter、d..

多张图片热点如何添加

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

css控制不允许操作iframe内容

评论(0)浏览(353)分类:HTML/CSS兼容/XML
css控制不允许操作iframe内容  css如何禁止用户操作iframe的内容(iframe加载的可能是跨域的页面),如选择iframe里面的内容。  解决办法就是用一个透明的层遮盖在iframe上方,这样就无法操作底层的iframe了。  测试代码如下!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdtitlecss控制不允许..

·在html页面中显示乱码解决办法

评论(0)浏览(353)分类:HTML/CSS兼容/XML
·在html页面中显示乱码解决办法  今天修改一个客户网站,发现中文符号点,就是键盘上Esc键下那个中文点号,在一些系统的浏览器上显示一个框框,为乱码,但是在本人电脑上却可以正常显示为中文点号,其他电脑也正常显示,就公司里面有2台电脑是这个问题(这2台电脑其他浏览器打开也是一个框框乱码,如下图所示)。  检查后发现这些内容字体为Microsoft Yahei,Arial,Helveti..

选中网页内容弹出按钮点击发送选中内容到服务器

评论(1)浏览(346)分类:JavaScript/Ajax开发技巧
选中网页内容弹出按钮点击发送选中内容到服务器  效果:在网页中选中一段内容后,自动弹出一个按钮,点击按钮可以将选中的内容回发到服务器。  实现方法:用javascript添加document.onmouseup事件,用range API判断是否选中内容,选中内容则弹出按钮,给按钮绑定点击事件,点击后将选中的内容使用ajax发送到服务器端。  选中网页内容弹出按钮点击发送选中内容到服务器源代码如下script ..

html if语句使用

评论(0)浏览(329)分类: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版本..

javascript获取file控件全路径

评论(0)浏览(327)分类:JavaScript/Ajax开发技巧
javascript获取file控件全路径  通过测试,IE7(IE8没有测试过)也是能够获得完整的文件路径名字的,关键问题皆是在firefox,由于ff出于自身安全顾虑,ff3.0开始,只能获得文件名字,但是如果要获得完整的文件名,提供了一个nsIDOMFile的接口,让用户可以获得加密过的文件全路径,这个仅在ff3.0以上支持,其他浏览器皆不支持。以下具体解释是网上某牛人的帖子,解释了firef..

canvas对象drawImage方法

评论(0)浏览(322)分类: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..

css3动画transform使用详解

评论(0)浏览(307)分类:HTML/CSS兼容/XML
css3动画transform使用详解  Transform字面上就是变形,改变的意思。在CSS3中transform主要包括以下几种:旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。下面我们一起来看看CSS3中transform的旋转rotate、扭曲skew、缩放scale和移动translate具体如何实现,老样子,我们就从transform的语法开始吧。语法: transform : none | transform-funct..

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

评论(0)浏览(300)分类: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  ..

css3 3d翻牌效果

评论(0)浏览(297)分类:HTML/CSS兼容/XML
css3 3d翻牌效果  css3动画3d翻牌效果,请用firefox和chrome查看示例htmlheadtitlecss3 3d翻牌效果/titlestyle type=text/css.kuang{height: 300px;width: 200px;border: 2px solid black;position:relative}.poker{height: 300px;width: 200px;background-color: #00ffff;position: absolute;left: 0px;top: 0px;-webkit-transition:all 1s linear;-webkit-t..

Microsoft.AlphaImageLoader滤镜讲解

评论(0)浏览(293)分类:HTML/CSS兼容/XML
Microsoft.AlphaImageLoader滤镜讲解Microsoft.AlphaImageLoader是IE滤镜的一种,其主要作用就是对图片进行透明处理。虽然FireFox和IE7以上的IE浏览器已经支持透明的PNG图片,但是就IE5-IE6而言还是有一定的意义。 IE5.5或以上版本开始支持 AlphaImageLoader。这个滤镜为IE特有。 基本语法及参数:filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled..

css打造下拉菜单

评论(0)浏览(291)分类:HTML/CSS兼容/XML
css打造下拉菜单  纯css写的菜单,通过:hover伪类控制子菜单的显示,ie6-不支持非连接对象的伪类,需要自己写js代码进行兼容,不过可以考虑放弃ie6了,应该没人再用了吧?!doctype htmltitle简单纯css菜单/titlestyle ul,li{list-style:none;margin:0px;padding:0px} ul.menu li{margin-left:10px;float:left;position:relative;line-height:20px}/*注意..

子容器margin-top为何会影响父容器位置

评论(0)浏览(283)分类:HTML/CSS兼容/XML
子容器margin-top为何会影响父容器位置  子容器设置css设置margin-top,如果子容器和父容器直接没有内容,由于css盒式模型,将会导致子容器和父容器的margin-top叠加,导致父容器也会继承子容器的margin-top,导致父容器顶部出现空白。  示例代码如下,cs父容器aa继承了cs设置的martin-top!doctype htmlstyle .main{margin-left:100px;width:500px;height:500px;border:solid ..

js css3 3d翻牌效果

评论(0)浏览(283)分类:HTML/CSS兼容/XML
js css3 3d翻牌效果!doctype htmlhtml lang=enhead meta http-equiv=Content-Type content=text/html; charset= utf-8 titlecss3 3d翻牌效果/title style* {margin:0;padding:0;list-style-type:none;}.warperMain01_2 {height:auto;background: #eff1f0;font-family:微软雅黑;overflow:hidden; margin:0 !important; padding:5em 0;}.warperMain01_2 h1{..

css控制DOM对象旋转

评论(0)浏览(281)分类:HTML/CSS兼容/XML
css控制DOM对象旋转  css控制HTML DOM对象旋转任意角度,兼容IE,firefox,chrome等主流浏览器,效果如下  源代码如下!DOCTYPE htmlhtml lang=enheadmeta http-equiv=Content-Type content=text/html; charset=utf-8titleDIV旋转属性的演示/titlemeta http-equiv=X-UA-Compatible content=IE=EmulateIE8 /style type=text/css body {font-family: Arial, sans-..

IE7-浏览器设置子容器innerHTML会导致父容器offsetTop更改

评论(0)浏览(279)分类:HTML/CSS兼容/XML
IE7-浏览器设置子容器innerHTML会导致父容器offsetTop更改  今天碰到一个问题,IE7-浏览器下(或者Quirks模式下),如果设置设置子容器的innerHTML,当设置的内容为table并且包含了align=center,会导致父容器的offsetTop增加,从而使父容器向下移动。  测试代码如下,子容器table没有align=center属性,设置子容器不会修改父容器的offsetTop属性div id=bb style=border:1px solid gray;overflow:hi..

IE透明滤镜alpha失效解决办法

评论(0)浏览(269)分类:HTML/CSS兼容/XML
IE透明滤镜alpha失效解决办法  IE的透明滤镜filter:alpha(opacity=40)在未添加xhtml申明时会不起效果。即使添加了xhtml申明,IE7也无效。IE7下xhtml申明alpha滤镜无效IE8无xhtml申明也无效源代码如下!DOCTYPE htmltitleIE透明滤镜alpha失效/titlestyle#dvTable div.opc4{opacity:0.4;filter:alpha(opacity=40);}#dvTable div.opc4:hover{opacity:1;filter:alpha(opacity=1..

javascript实现text-overflow:ellipsis效果

评论(0)浏览(268)分类:JavaScript/Ajax开发技巧
javascript实现text-overflow:ellipsis效果  对于一长串不会自动换行的字符串(如数字和字母连在一起的商品编号或者其他内容),会导致页面或者布局被撑破。要自动换行可以使用word-break:break-all(IE和chrome支持,firefox不支持)。!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdstyle.ellipsis{font-size..

offsetWidth、offsetHeight是如何计算的

评论(0)浏览(265)分类:HTML/CSS兼容/XML
offsetWidth、offsetHeight是如何计算的在元素 A 上调用 offsetWidth 属性时,必须按以下算法返回结果值: 如果元素 A 不具有 CSS 布局盒子,则返回 0,并停止本算法。 以 CSS 像素为单位,返回元素 A 的边框盒子宽度。在元素 A 上调用 offsetHeight 属性时,必须按以下算法返回结果值: 如果元素 A 不具有 CSS 布局盒子,则返回 0,并停止本算法。 以 CSS 像素为单位,返..

viewport参数详解

评论(0)浏览(255)分类:HTML/CSS兼容/XML
viewport参数详解  meta name=viewport content=width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0  该meta标签的作用是让当前viewport的宽度等于设备的宽度,同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求,但让 viewport的宽度等于设备的宽度,这个应该是大家都想要的效果,如果你不这样的设定的话,那就..

IE6/IE7下子元素position relative,父元素overflow auto子元素不滚动

评论(0)浏览(253)分类:HTML/CSS兼容/XML
IE6/IE7下子元素position relative,父元素overflow auto子元素不滚动  在IE6,IE7下,子元素使用position:relative定位、父元素使用overflow:auto后,当滚动父元素的滚动条后,position:relative定位子元素没有随滚动条滚动,而是固定在原来的位置,犹如position:fixed定位效果。  IE6/IE7下子元素position relative,父元素overflow auto子元素不滚动示例图如下正常显示,子元素未滚动前滚动父元素滚动条后,子..

css属性zoom使用方法

评论(0)浏览(229)分类:HTML/CSS兼容/XML
css属性zoom使用方法zoom使用说明:  设置或检索对象的缩放比例。设置或更改一个已被呈递的对象的此属性值将导致环绕对象的内容重新流动。虽然此属性不可继承,但是它会影响对象的所有子对象( children )。这种影响很像 background 和 filter 属性导致的变化。此属性对于 currentStyle 对象而言是只读的。  对于其他对象而言是可读写的。  换句话说,用css中的..