CSS文件中设置如下即可filter:alpha(opacity=60); //支持IE opacity:0.6; //支持Chrome，Firefox版权声明：本文为博主原创文章，未经博主允许不得转载。原文：http://blog.csdn.net/adgjlxxx/article/details/46776991
正文自动给CSS文件添加不同浏览器的CSS3前缀：Autoprefixer安装只需兼容主流浏览器正常情况使用：（在书写完的CSS样式文件中，按F1，选择Autoprefixer CSS）这时候会添加最新需要兼容的css头（PS：现在基本上只考虑Safari和Chrome了）兼容其他浏览器但是，这往往不是我们需要的，有时候还需要兼容Firefox、Opera和IE，那么可以自定义VSCode的配置项：// autoprefixer配置"autoprefixer.browsers": ["ie >= 6", "firefox >= 8","chr...
今天看了张鑫旭大佬的新书的有感吧，记录一下。Web标准未对一些场景做出明确规范，所以各大浏览器厂家只能根据自己的理解和喜好去实现，表现差异不是浏览器的bug，用计算机领域的术语描述为"未定义行为"。比如一个例子： CSS中的一个伪类，最常用的一个伪类:active，鼠标按下，执行改伪类对应的CSS样式，鼠标抬起还原。但是这种情况呢：<!DOCTYPE html> <html> <head><meta charset="utf-8" /><style>.active-btn {display: inline...
像下面图中的布局，如果排列的元素是登高的话，相信很多人都会使用浮动来布局，不过如果元素不等高的话，不添加多余的标签，浮动布局是很难实现下图中的效果。如果遇到这种情况，可以使用inline-block来布局。 现代浏览器的最新版都支持inline-block，只有该死的ie6、7不支持inline-block，但ie6、7可以通过 display：inline；zoom：1；来模拟。 下面是inline-block兼容的代码： 复制代码代码如下:display:inline-block;*display:i...
首先声明： 本人尽管在web前端岗位干了好多年，但无奈岗位对技术要求不高。html,css用的比較多，JavaScript自己原创的非常少，基本都是copy改动，所以自己真正动手写时，发现基础非常不坚固，边学习边实践，收获非常大。效果图： 不废话了，贴码了 1、css代码a:link{color:white;text-decoration:none;} a:visited{color:white;text-decorative:none;} a:hover{color:white;text-decorative:none;} a:active{color...
ie6和ie7#tip {*background:black; /*IE7 背景变黑色*/_background:orange; /*IE6 背景变橘色*/} IE8和IE9:root .test { color:#963\9; } /* IE9 only */ firefox@-moz-document url-prefix(){.bt_comment_ico{top:-1px;}} ie系列*html .ico_tj{background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale,src=‘http://#‘);}FILTER: progid:DXImageTransform.Microsoft.grad...
客户端会缓存css或js文件，改变版本号，客户端浏览器就会重新下载新的js或css文件，在js或css后加?v= 版本号的用法如下代码如下:<span style="font-size:14px;">css和js带参数（形如.css?v=与.js?v= 或 .css?version=与.js?version= ） <script type=”text/javascript” src=”jb51.js?version=1.2.6″></script><link rel=’stylesheet’ href=’base.css?version=2.3.3′ type=’text/css’ />使用参数有两种可能： 第一、脚本...
在默认情况下，点击 a 标签，input，或者添加click事件的时候，浏览器留下一个轮廓外框（chrome之下为蓝色）~ 然而这些默认的轮廓外框，有时候很影响美观，并不是我们想保留的。 我们应如何消除这些讨厌的 轮廓外框呢？使用outline:none去除轮廓外框如：a{ outline:none; }PC端轮廓外框消失了，然而发现在手机上依然存在~~这时候添加如下代码便可a{outline:none; -webkit-tap-highlight-color:rgba(0,0,0,0); } -webkit-tap-highli...
问题最近在使用background-image属性来实现CSS3的逐帧动画时，碰到了个问题。在chrome浏览器上，background-image属性是支持css3动画的，但是到了firefox上，就完全看不到任何动画。原因通过网上查找，才发现W3C标准中明确background-image属性是不支持动画的，所以firefox由于遵循了该标准，并没有给该属性支持动画。解决过程解决方法是使用backgrond-position属性，该属性在W3C标准中是支持动画的，因此所有浏览器应该是可以支持...
zoom:1;一般是拿来解决IE6的子元素浮动时候父元素不随着自动扩大的问题，功能相当于overflow:auto，同样也可以用height:1%来代替zoom:1。所以一般要在浮动元素的父元素加上overflow:auto；zoom:1; 。这样，子元素浮动，父元素再也不会不自动跟子元素扩大了。Zoom的使用方法：复制代码代码如下:zoom :? normal | numbernormal : 默认值。使用对象的实际尺寸number : 百分数 | 无符号浮点实数。浮点实数值为1.0或百分数为100%时相...
针对透明背景，包括背景图片和背景色（兼容IE，FF，OP等浏览器）一、背景完全透明 .bg{background:transparent } 二、背景半透明这里要分两个div，一个单独设置背景透明度，另外一个放内容 margin-top:-33px;使用这个方法让文字叠加在透明背景图上。css: .bg{ width: 1000px; height:33px; background-color:#fffff; background-image:url(img.jpg);filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3; -khtml-opacity: 0.3;}...
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」，而I...
关于图片的旋转，一般来说有3种解决方案：（1）滤镜 （2）css3 （3）canvas。接下来逐一讲解。为了方便理解，我们主要以90度整倍数讲解，兼顾其他角度。 1. 滤镜（IE专属） 1.1 旋转滤镜 语法如下： filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=i); rotation取值0（0或360度），1（90度），2（180度），3（270度）。取其他数无效。 旋转90度示例： css： #box { width: 100px; ...
1.图片下方出现几像素的空白间隙问题说明：这个问题在ie6和ff（火狐）下经常见到,例如 <div><img src=""/></div>这个图片下面会有一条空白间隙，解决方法：给图上一个垂直方向的属性如:vertical-align: top(任意一个就行middle);这个问题从而延伸到，object(视频)和textarea在火狐下也会出现类似的问题，解决方法一样。细心的朋友会发现在第二节ahuing的重置代码里就有这样一个全局定义object,textarea,img{vertical-align: top...
.transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } Here is what each of those CSS properties is for:opacity: 0.5; This is the “most important” one because it is the current standard in CSS. This will work in most versions of Firefox, Safari, and Opera. This would be all you need if all browsers supported current st...