2013年12月12日
摘要: text-overflow: clip|ellipsis;clip :不显示省略标记(…),只是简单的裁切ellipsis :当对象内文本溢出时显示省略标记(…)很多时候,文字太长,都会考虑显示省略号标记。但是对于text-overflow: ellipsis; 是有条件的。test01:text-overflow:ellipsis;当文本溢出时是否显示省略。text-overflow:ellipsis;当文本溢出时是否显示省略。.ad{ width: 400px; background: #f0dcb9; text-overflow: ellipsis; }效果:没有得到想要的效果,查阅资料 阅读全文
posted @ 2013-12-12 11:09 群er 阅读(310) 评论(0) 推荐(0)
  2013年11月18日
摘要: .box01{position:relative; padding: 100px; background: red;}.box02{position: absolute; width: 30px; height: 30px; background: blue; top:0; left: 0;}标准浏览器的效果:ie6浏览器:很明显,子元素的left值从父元素的padding-left开始计算。一般遇到这种奇怪的现象,我都会尝试去让元素hasLayout,子元素已经hasLayout了,选择触发父元素的hasLayout.1、设置父元素的width:100px;ie6下效果:le... 阅读全文
posted @ 2013-11-18 10:07 群er 阅读(97) 评论(0) 推荐(0)
  2013年11月7日
摘要: hasLayout----------IE浏览器css bug的一大罪恶根源。part01:什么是hasLayout? 百度百科对hasLayout解释:(微软要设hasLayout的原因:)haslayout 是IE浏览器渲染引擎的一个内部组成部分。在IE浏览器中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念,渲染引擎采用了 hasLayout 的属性。当一个元素的hasLayou = -1时,它负责对自己和可能的子孙元素进行尺寸计算和定位。【即这个元素有一个独立的布局(layout)】这意味着这个元素需要花更多的代... 阅读全文
posted @ 2013-11-07 23:54 群er 阅读(196) 评论(0) 推荐(0)
  2013年11月6日
摘要: zoom:1的作用:触发IE浏览器的haslayout、解决ie下的浮动等一些问题。 zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持。它可以设置或检索对象的缩放比例。应用: 1.用css中的zoom属性可以让网页实现IE7中的放大缩小功能。 让你的网页缩小为原来的一半 2.使用zoom解决IE6浏览器下嵌套容器清除浮动问题 经常遇到一个容器外面套一个边框,边框高度随容器高度变化,但是当边框内容器设置了浮动属性后,外框就不跟随变化,这时就需要清除浮动。 很多时候,我们直接给父元素添加一个类名class=”clearfix” .clearfix:after{... 阅读全文
posted @ 2013-11-06 15:37 群er 阅读(490) 评论(0) 推荐(0)
摘要: 发生场合:当给父元素内第一个浮动元素设置margin-left(元素float:left)或margin-right(元素float:right)时margin加倍。test01:左浮动元素 第1个元素 第2个元素 第3个元素 第4个元素.clearfix:after{content:'.'; display: block; height: 0; clear:both; visibility: hidden;}.clearfix{zoom:1;}.box01{border:1px solid #f00; list-style: none; padding: 0;}.bo... 阅读全文
posted @ 2013-11-06 14:42 群er 阅读(337) 评论(0) 推荐(0)
摘要: 发生场合:一个元素浮动,然后一个不浮动的元素自然上浮与之靠近会出现的3px的间距。以下为个人所做测试:test01:不浮动元素为块级元素box01box02.box01{float: left; background: #f1c100;}.box02{background: red;}ie6效果:没有出现3px间距test02:不浮动的元素修改为行内元素box01box02.box01{float: left; background: #f1c100;}.box02{background: red;}ie6效果:出现3px间距 test03:修复这个3px间距 (方法一)html结构按照t.. 阅读全文
posted @ 2013-11-06 14:15 群er 阅读(865) 评论(1) 推荐(0)