今天看了张鑫旭大佬的新书的有感吧,记录一下。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...
前言:该篇说明:请见 说明 —— 浏览器工作原理与实践 目录 在上一篇文章中我们介绍了导航相关的流程,那导航被提交后又会怎么样呢?就进入了渲染阶段。这个阶段很重要,了解其相关流程能让你 “看透” 页面是如何工作的,有了这些知识,你可以解决一系列相关的问题,比如能熟练使用开发者工具,因为能够理解开发者工具里面大部分项目的含义,能优化页面卡顿问题,使用 JavaScript 优化动画流程,通过优化样式表来防止强制同步...
使用如下css可以使div永远保持在屏幕正中<style type="text/css">.log {position:absolute; /*绝对定位*/top:50%; /*距顶部50%*/left:50%; margin:-100px 0 0 -150px; /*设定这个div的margin-top的负值为自身的高度的一半,margin-left的值也是自身的宽度的一半的负值.(感觉在绕口令)*/width:300px; /*宽为400,那么margin-top为-200px*/height:200px; ...