兼容多浏览器就要为每一个浏览器写对应的 CSS，太低版本的浏览器只能使用图片做背景，下面是当前五大浏览器对 gradient 的支持 经常有一些时候需要使用渐变背景，使用长条图片有点太不高大上了，于是自己写了个小例子，兼容多浏览器就要为每一个浏览器写对应的 CSS，太低版本的浏览器只能使用图片做背景。 下面是当前五大浏览器对 gradient 的支持 代码如下:<style type="text/css" media="screen"> #gradient { width: 200px; ...
所谓的Hack就是只有特定浏览器才能识别这段hack代码。Hack 不是什么好东西，除非没有办法，我们尽量还是不要用着玩意。 下面是各个浏览器的CSS Hack 列表。Firefox 浏览器@-moz-document url-prefix() {.selector {property: value;} }支持所有Gecko内核的浏览器 (包括Firefox)*>.selector { property: value; }Webkit 内核浏览器@media screen and (-webkit-min-device-pixel-ratio: 0) {Selector {property: value;} }Opera 浏览...
在 FF/Chrome 等较新的浏览器中可以使用css属性background-color的rgba轻松实现背景透明，而文字保持不透明。而IE6/7/8浏览器不支持rgba，只有使用IE的专属滤镜filter:Alpha来实现，但是这样写法会把文字也变为透明，因此只有在透明容器的子节点（文本节点除外）内设置position:relative才能不继承其父元素的透明滤镜，代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DT...
CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加DOCTYPE声名. CSS技巧1.p的垂直居中问题vertical-align:middle; 将行距增加到和整个p一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行 2. margin加倍的...
什么是CSS Hack？不同的浏览器对CSS的解析结果是不同的，因此会导致相同的CSS输出的页面效果不同，这就需要CSS Hack来解决浏览器局部的兼容性问题。而这个针对不同的浏览器写不同的CSS 代码的过程，就叫CSS Hack。CSS Hack 形式CSS Hack大致有3种表现形式：CSS属性Hack、CSS选择符Hack以及IE条件注释Hack， Hack主要针对IE浏览器。1、属性级Hack：比如IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，而...
区别不同浏览器的CSS hack写法： 区别IE6与FF： backgroundrange;*blue; < /span>区别IE6与IE7： background:green !important;blue; < /span>区别IE7与FF： backgroundrange; *background:green; 区别FF，IE7，IE6： backgroundrange;*background:green !important;*blue; < /span>注：IE都能识别*;标准浏览器(如FF)不能识别*；IE6能识别*，但不能识别 !important, IE7能识别*，也能识别!importa...
css控制div固定在浏览器底部注意：此功能仅用于页面高度较小页面。代码如下：<html> <head> <style type="text/css"> body{margin:0px; } #main{width:100%;height:50px;position:absolute;top:100%;margin-top:-50px;background:#360;color:white; } </style> </head> <body> <div style="border:1px solid #f00;width:500px;height:1800px"></div> <div id="main">bottom</div> </body> </html>网上找了个更好的：当浏览器窗口无...
1、兼容性根据canius，transition 兼容性如下图所示：<!DOCTYPE html> <html> <head> <style> p { width:100px; height:100px; background:blue; transition:width 2s; -moz-transition:width 2s; /* Firefox 4 */ -webkit-transition:width 2s; /* Safari and Chrome */ -o-transition:width 2s; /* Opera */ }p:hover { width:300px; } </style> </head> <body><p></p><p>请把鼠标指针移动到蓝色的 p 元素上，就可以看到过渡效果...
最近入坑 Web 动画，所以把自己的学习过程记录一下分享给大家。CSS3 3D 行星运转 demo 页面请戳：Demo。（建议使用Chrome打开）本文完整的代码，以及更多的 CSS3 效果，在我 Github 上可以看到，也希望大家可以点个 star。嗯，可能有些人打不开 demo 或者页面乱了，贴几张效果图：（图片有点大，耐心等待一会）CSS3 3D 行星运转效果图随机再截屏了一张：强烈建议你点进 Demo 页感受一下 CSS3 3D 的魅力，图片能展现的东西毕竟有限。...
css如何垂直居中一个元素的问题已经是一个老生常谈的问题了。不管对于一个新手或者老手，在面试过程中是经常被问到的。前两天在看一个flex的视频教程，当中提到了有关元素的居中问题，所以今天小编就来扒一扒几种常见的方式。不足之处请大家批评指正（所有的代码都是自己亲手敲过可用的）1、水平居中（margin:0 auto;） 关于这个，大家应该是最不陌生的,不管是在培训班还是自己自学的话 。这个应该是老师讲的第一个方法了（...
有这么一个webkit的私有属性： -webkit-appearance:none; /*去除input默认样式*/添加该样式，并且值为none时即可取消浏览器对于控件的默认样式。另外这个属性也有个神奇的地方~ 他可以用来调用显示浏览器对各种控件的默认样式，比如： 我是span啊亲!! 那么他所显示的效果就是button标签的自带样式。哈 觉得挺有趣的~另外这个属性可以用来去除Iphone上面那个恶心的超大圆角的按钮默认样式，从而使自己编辑的按钮样式显示正常...
兼容性处理要点 1、DOCTYPE 影响 CSS 处理 2、FF: 设置 padding 后， div 会增加 height 和 width， 但 IE 不会， 故需要用 !important 多设一个 height 和 width 3、FF: 支持 !important， IE 则忽略， 可用 !important 为 FF 特别设置样式 4、div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行 5、在mozilla firefox和IE中的BO...
@supports可以用来检查浏览器是否支持某CSS属性,并且可以通过JavaScript进行控制,以下就来详细说明使用CSS的@supports标记来检测浏览器的兼容情况的方法CSS @supports标记在CSS代码里跟@media查询语句的语法相似：@supports(prop:value) { /* 各种样式 */ }CSS @supports允许程序员用多种不同的方法来探测当前浏览器是否支持某项CSS样式特征。 基本属性检测你可以执行对基本属性和属性值的检测：@supports (display: flex) { p...
为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack! 做前端多年，虽然不是经常需要hack，但是我们经常会遇到各浏览器表现不一致的情况。基于此，某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现。我个人是不太推荐使用hack的，要知道一名好的前端，要尽可能不使用hack的情况下实现需求，做到较好的用...
本篇介绍了CSS3与页面布局学习总结——浏览器兼容与前端性能优化，具体如下：一、浏览器兼容1.1、概要世界上没有任何一个浏览器是一样的，同样的代码在不一样的浏览器上运行就存在兼容性问题。不同浏览器其内核亦不尽相同，相同内核的版本不同，相同版本的内核浏览器品牌不一样，各种运行平台还存在差异、屏幕分辨率不一样，大小不一样，比例不一样。兼容性主要考虑三方面：1)、CSS兼容2)、JavaScript兼容3)、HTML兼容这三类也是前...