![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS样式
前端开发工程师
6年前端开发,可写js组件
展开
-
处理元素的旋转
-webkit-transform: rotate(45deg);transform: rotate(45deg); filter:progid:DXImageTransform.Microsoft.Matrix(M11=-0.707,M12=-0.707,M21=0.707,M22=-0.707,SizingMethod='auto expand'); —————...原创 2011-05-17 11:24:49 · 262 阅读 · 0 评论 -
渐进增强式布局探讨(上)
来看一个经典的三栏布局:从内容出发(渐进增强的核心思想),一份合理的HTML结构如下:<div id="page"> <div id="hd"></div> <div id="bd"> <div class="main"></div&原创 2012-04-12 11:31:41 · 76 阅读 · 0 评论 -
IE浏览器下的特别属性 hasLayout
百度百科看来讲的很清楚:http://baike.baidu.com/view/2945869.htm haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在InternetExplorer中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念,渲染引擎采用了 hasLa...原创 2012-04-13 19:33:10 · 156 阅读 · 0 评论 -
IE6下的双边距Bug!
IE6下的双边距Bug!例:.db_margin{ float:left ; margin-left:100px;} !IE6情况 正常边距100px IE6情况 变成了200px why?what?为什么会这样,怎么搞定它?测了各种浏览器,只有IE6内核下才会出现这个bug。好了,看来它很调皮那么我决解...2012-04-16 20:37:56 · 69 阅读 · 0 评论 -
IE6/IE7不支持display:inline-block ?
IE6/IE7不支持display:inline-block ?有时候我只是想给元素加行高,内补丁,宽度高度,那么正常的浏览器下面,我们都是常常用这个display属性: display 详细说明:http://www.w3school.com.cn/css/pr_class_display.asp 那么了解了这个属性,我们要怎么处理 IE6/7下的bug呢? 方法就是...2012-04-16 20:49:08 · 78 阅读 · 0 评论 -
元素的Margin重叠
元素的Margin重叠 了解一下重叠规则: 1.水平Margin不重叠2.浮动元素上下不重叠 (float)3. 飘动元素上下margin 不重叠 (position)4.常规折行上下margin重叠 例:浮动元素上下不重叠 (float)/ 飘动元素上下margin 不重叠 (position)#wrapper{ width:500px;}...原创 2012-04-16 21:04:38 · 78 阅读 · 0 评论 -
CSS 在IE6, IE7 和IE8中的差别
选择器与继承伪类与伪元素属性支持其它各种技术重要bug和不兼容问题选择器与继承子选择器示例body > p { color: #fff;}描述子选择器选择一个特定父级元素的所有直接子级元素,在上面的例子中,body是父元素,p是子元素。支持情况IE6NoIE7YesIE8YesBugs...原创 2012-11-27 16:48:58 · 90 阅读 · 0 评论 -
<meta http-equiv="X-UA-Compatible" content="IE=7" />意思是将IE8用IE7进行渲染,使网页在IE8下正常显示...
<meta http-equiv="X-UA-Compatible" content="IE=7" />意思是将IE8用IE7进行渲染,使网页在IE8下正常显示X-UA-Compatible是针对ie8新加的一个设置,对于ie8之外的浏览器是不识别的,这个区别与content="IE=7"在无论页面是否包含<!DOCTYPE>指令,都像是使用了 Windows Int...原创 2013-06-26 14:54:44 · 115 阅读 · 0 评论 -
css ie6 下的png
.classPng{ position: absolute; left:200px; width: 361px;/*高度一定要设要不然背景会缩进*/ height:100px; /*高度一定要设要不然背景会缩进*/ background:url(images/mapSplit.png) no-repeat; /*IE6清除背景图*/ _background:none; /*用f...原创 2013-06-28 18:33:27 · 88 阅读 · 0 评论 -
响应式布局这件小事
讲到响应式布局, 相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果, 设计师提出了响应式布局的设计方案。今天就和大家来讲讲响应式布局这件小事,包含什么是响应式布局、响应式布局的优点和缺点以及响应式布局该怎么设计(通 过CSS3 Media Query实现响应布局)。一、什么是响应式布局?响应...原创 2013-02-28 11:49:44 · 180 阅读 · 0 评论 -
IE对CSS样式表的限制和解决方案
HTML文档与CSS的关联常见有4种方式:使用link标记<link rel="stylesheet" type="text/css" href="sheet.css" />使用style元素<style type="text/css">body{background:#fff;}h1{font-size:2em;}<原创 2014-05-27 17:19:45 · 203 阅读 · 0 评论 -
样式优先级
从上到下执行原则样式优先级: 高到底 1~101. !important 2. 标签行内样式 3. 情景的class( #id .class) 4. id 5. 情景的class( .class 标签.class) 6. 情景的class( .class .class) 7. 情景的class( 标签.class) 8. 情景的class(...2014-07-10 11:53:15 · 93 阅读 · 0 评论 -
强制不使用“兼容性视图”的HTML代码
强制不使用“兼容性视图”的HTML代码在IE8浏览器以后版本,都有一个“兼容性视图”,让不少新技术无法使用。那么如何禁止浏览器自动选择“兼容性视图”,强制IE以最高级别的可用模式显示内容呢?下面就介绍一段HTML代码。X-UA-Compatible是一个设置IE浏览器兼容模式的属性,在IE8浏览器之后诞生。IE8或者IE9有很多种模式,比如,IE8有4种模式:IE5.5怪异模式、IE7标...原创 2015-02-02 11:04:19 · 170 阅读 · 0 评论 -
怪异模式(Quirks Mode)对 HTML 页面的影响
怪异模式(Quirks Mode)对 HTML 页面的影响Quirks Mode 概述定义什么是 Quirks Mode? 简单来说,Quirks Mode 就是浏览器为了兼容很早之前针对旧版本浏览器设计、并未严格遵循 W3C 标准的网页而产生的一种页面渲染模式。历史由渲染引擎产生的两种文档模式谈到 Quirks modes 首先就要从浏览器渲染引擎说起。我们知道所有的浏...原创 2015-02-02 11:49:32 · 986 阅读 · 0 评论 -
CSS3 icon font完全指南
大家都知道现在各个浏览器都支持CSS3的自定义字体(@font-face),包括IE6都支持,只是各自对字体文件格式的支持不太一样。那么对于网站中用到的各种icon,我们就可以尝试使用font来实现,本文将详细讲解这种用法。为什么要将icon做成字体?在很多网站项目中,我们常常会用到各种透明小图标,然后网站要兼容各个浏览器,也可能会有多个尺寸,甚至还要考虑换肤等需求。那么我们就要将这些小...原创 2013-10-10 11:29:00 · 98 阅读 · 0 评论 -
定义文档兼容性,让IE按指定的版本解析我们的页面
使用文档兼容性的方法比较容易,就是在我们要反馈给客户端的HTML代码中的head中添加一个meta元素,用来描述当前的文档需要使用何种浏览器版本来解释当前文档,代码类似下面这样:code12345678910<html><head> <!-- Mimic Internet...原创 2013-10-19 11:00:27 · 108 阅读 · 0 评论 -
2、关于content = “IE=edge,chrome=1″ 详解
1< meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" />介绍:这是个是IE8的专用标记,用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式(比如人见人烦的IE6),以此来解决部分兼容问题,例如模拟IE7的具体方式如下:< meta http-eq...原创 2012-04-11 22:57:45 · 136 阅读 · 0 评论 -
1、meta http-equiv 标签让你的网页在IE8下正常显示
<meta http-equiv="X-UA-Compatible" content="IE=7" />意思是将IE8用IE7进行渲染,使网页在IE8下正常显示 X-UA-Compatible是针对ie8新加的一个设置,对于ie8之外的浏览器是不识别的,这个区别与content="IE=7"在无论页面是否包含<!DOCTYPE>指令,都像是使用了 Windows I...原创 2012-04-11 22:51:02 · 135 阅读 · 0 评论 -
A标签的虚线
盲人站长深恶痛绝的onfocus=”this.blur()”这篇文章是淘宝的妙净写的 杭州最美的季节里,淘宝无障碍访问改善小组有幸邀请到盲人在线站长——争渡读屏团队成员——杨永全同学和我们一起面对面交流网站无障碍访问方面的问题。杨同学使用电脑必须使用读屏软件,就像他看不到我们的脸必须靠声音识别我们一样。在谈到读屏软件操作页面时,他对我们前端的同学特别...原创 2011-05-20 09:29:28 · 521 阅读 · 0 评论 -
XHTML 1.0 Transitional WEB标准产生的问题
曾经流行一时的HTML标记语言已经被官方认为过时了,将要接任它的是XHTML(http://www.w3.org/MarkUp/)。如果你的网站按照较严格的XHTML规则书写,那么这个网站将在不同的浏览器中保持一致的样式。并且你可以认为在未来浏览器的版本升级变化中仍然保证网站外观的一致性。同样你也会得到跨浏览器,跨设备以及跨平台的一致性支持。XHTML有如下两个主要目标:将文档的结...2011-08-23 10:52:56 · 281 阅读 · 0 评论 -
IE9 Only CSS Hack
以前写过《IE8的css hack》,ie9一出css hack也该更新,以前一直没关注,今天在内部参考群mxclion分享了IE9的css hack,拿出来也分享一下:select {background-color:red\0; /* ie 8/9*/background-color:blue\9\0; /* ie 9*/*background-color:#dd...原创 2011-07-13 20:31:38 · 127 阅读 · 0 评论 -
css3 写了个种纸张贴纸效果
样式代码: *{margin: 0;padding:0;} body {margin: 0; padding: 20px 100px;background-color: #f4f4f4;} pre{max-height:200px;overflow:auto;} div.demo {overflow:auto;} ...2011-10-09 09:38:40 · 418 阅读 · 0 评论 -
主流浏览器CSS3和HTML5兼容性详细清单
各大主流浏览器对 CSS3 和 HTML5 的支持越来越完善,曾经让多少前端开发人员心碎的IE系也开始拥抱标准。就在前几天,W3C的 HTML5 社区领袖 Shelley 宣布,HTML5的开发工作已经接近完成,如果进展顺利,HTML5 将在 2012 年正式成为国际标准。 当然,即使标准正式制定了,现代浏览器要普及到大部分用户也是需要一个相当漫长的过程。如果你现在就希望使用 CSS...原创 2011-10-11 10:54:00 · 156 阅读 · 0 评论 -
浮动引起的行高丢失(float)
浮动引起的行高丢失(float) 以下给出决解方案.layout{ *zoom:1;}.layout:after{ content:'\20'; display:block; height:0; clear:both;}原创 2012-05-01 22:16:30 · 283 阅读 · 0 评论 -
css透明度
filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;原创 2012-05-01 22:27:08 · 156 阅读 · 0 评论 -
91uu浮云【排版布局】
上一篇 91uu浮云【简介】只是很简单的贴图出来跟站点出来给大家看。 这里我不说费话,进入正题。 91uu浮云【排版布局】本实录针对有前端开发经验(即懂的html【div+css】+js),以及懂的使用 jquery框架的人,若没有基础的人请进入http://www.w3school.com.cn/ 进行学习! 先看一张图: (图:view) ...2012-05-02 12:43:13 · 656 阅读 · 0 评论 -
91uu浮云【桌面webapp块的实现方案】
上一节说到这个简单类似网络收藏夹的webos,那么我们要怎么配合后台去实现? 91uu浮云【桌面webapp块的实现方案】 <article style="overflow-x: hidden; overflow-y: hidden; height: 345px; "> <section class="current" style="positi...2012-05-02 16:43:09 · 450 阅读 · 0 评论 -
IOS下Safari渲染Transition时页面闪动Bug
http://classjs.com/category/technology/css/ 环境:IOS的Safari环境问题:在做移动端左右滑动的时候,用到了CSS3的Transition属性来进行动画变换,结果每次渲染Transition属性时,出现闪屏现象。解决办法:在网上查了一下,有一下两种解决办法,方法一:1-webkit-transform...原创 2012-05-17 11:30:39 · 1984 阅读 · 0 评论 -
CSS3动画库,很棒哦
官网地址Animate CSS官网地址Github地址https://github.com/daneden/animate.css演示地址:Demo Animate Css原创 2012-05-17 11:30:58 · 71 阅读 · 0 评论 -
移动端开发小结
1.viewportviewport就是除去所有工具栏、状态栏、滚动条等等之后网页的可视区域。移动设备屏幕宽度不同于传统web,因此我们需要改变viewport,有以下属性:1width - // viewport 的宽度 (范围从200 到10,000,默认为980 像素)2height - // viewport 的高度 (范围从...原创 2012-05-17 11:31:29 · 537 阅读 · 0 评论 -
样式里头的字体对应编码表
中文名英文名UnicodeUnicode 2Windows新细明体PMingLiU\65B0\7EC6\660E\4F53&#x65B0;&#x7EC6;&#x660E;&#x4F53;细明体MingLiU\7EC6\660E\4F53&#x7EC6;&#x660E;&#...原创 2012-03-22 11:01:28 · 291 阅读 · 0 评论 -
css 将图片进行编码,然后存在文档中,减少请求数
background-image: url(data:image/gif;base64,AAAA)这算是一种图片路径的新写法。将图片进行编码,然后存在文档中。我先解释一下各自含义:data: ----获取数据类型名称image/gif; -----指数据类型名称base64 -----指编码模式AAAAA ------指编码以后的结果。background-ima...原创 2013-03-29 15:07:02 · 118 阅读 · 0 评论 -
ie6 png问题
方案1 - 滤镜解决方案:介绍:滤镜从IE4.0被微软正式引入,所以我们可以使用滤镜解决IE6的PNG透明问题,滤镜不仅可以实现目前CSS3的一些旋转效果而且还可以引入图片。注意:此方法在部分版本的IETest中无效,建议使用标准的IE6来进行测试!目录说明: 思路: 1、书写正常的CSS代码,通过background导入图片,这样所有的浏览器均使用了此PNG图片; ...原创 2012-03-31 10:53:31 · 88 阅读 · 0 评论 -
web前端新入培训
新人培训计划 第一周html+css1.从零开始学习(HTML+CSS基础)http://www.imooc.com/learn/91.1 Html介绍(什么是html,html与css样式的关系,html语法,html结构)1.2 认识标签(认识标签理解各各标签的作用以及用途)1.3 认识css样式(什么是css样式,css样式的语法,css样式有什么用途)1.4 CSS选择...原创 2014-08-18 09:43:30 · 206 阅读 · 0 评论