![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
何东狮吼
just do it
展开
-
IE6 双倍水平外边距BUG以解决方案
解决办法:设置display:inline解决。原因分析:块框对象默认的display属性值是block,当设置了浮动同时设置了外边距就会出现这情况。并且,因为浮动都有其相对应的对象,只有相对于其父对象的浮动才会出现这样的问题。第一个对象是相对父对象的,而第二个对象是相对第一个对原创 2011-07-27 19:59:17 · 2122 阅读 · 0 评论 -
hasLayout 介绍,以及其触发条件
什么是 haslayout ? haslayout 是IE渲染引擎的一个内部组成部分。在IE中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念,IE渲染引擎采用了 hasLayout 属性,属性值可以为true或f转载 2011-07-27 22:20:47 · 5281 阅读 · 0 评论 -
float 和 hasLayout 研究(文字围绕)
IE6 浮动元素与非浮动元素在一起,3px偏移BUG*{ margin:0; padding:0; font-size:12px;}.box{ width:220px; overflow:auto;}.leftbox{ backgr原创 2011-07-29 15:57:07 · 961 阅读 · 0 评论 -
IE float浮动 子元素不能撑开父容器 解决办法
IE float浮动 子元素不能撑开父容器 解决办法#box{ background:#666; width:200px;}.obox{ background:#FF0000; width:100px; height:30px; float原创 2011-07-28 08:58:16 · 4519 阅读 · 0 评论 -
IE6 a:hover失效 原因是haslayout
haslayout引起IE6下 a:hover失效a:hover {}a:hover span{color:#F00;}鼠标经过时改变我的颜色在IE6下鼠标经过span不会变色,其他浏览器都OK,要解决这个问题就必须触发a:hover的原创 2011-07-29 13:20:24 · 1379 阅读 · 0 评论 -
css hack整理,更新于2011-7-27
CSS hack.box{ color:red; *color:green; /* IE6 IE7 */ *+color:green; /* IE6 IE7 */ [color:green; /* IE6 IE7 */ _co原创 2011-07-27 22:59:26 · 663 阅读 · 0 评论 -
IE6 下 PNG透明
<br /><style> body{ background:#000; } * html .png{ background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=原创 2010-09-10 23:01:00 · 668 阅读 · 0 评论 -
连续英文或者数字的强制换行
连续英文或者数字的强制换行*{ margin:0; padding:0;}.text{ width:64px; height:64px; background:#CCC; float:left; margin-left:5px;原创 2011-07-27 21:10:11 · 3163 阅读 · 0 评论 -
zoom:1 和 overflow:hidden
之前发过一个博文 http://blog.csdn.net/hedong37518585/article/details/6644408#reply 对其中的overflow:hidden的作用比较迷惑感谢qqshenyunzcz 对该日志的回复,当我对overflow原创 2011-07-29 17:20:33 · 5386 阅读 · 0 评论 -
纠结的 float与行框 --- 文字围绕浮动之谜
最近一直纠结于浮动和非浮动元素相邻时候的奇怪表现,按照我的理解,浮动元素浮动后就脱离了普通文档流,相邻的非浮动元素就会忽略浮动元素本来应该占有的那部分空间。按照我之前的理解,那么我认为如果一个元素A浮动了,那么相邻的非浮动元素B一定会被A覆盖在下面了,但是实际情况中我有两点问原创 2011-07-30 06:56:28 · 7325 阅读 · 7 评论 -
内联排列的间距 和 浏览器对换行符理解成文本节点的原因研究
li使用display:inline的时候,如果标签之间有换行符,浏览器会留空隙(IE6 IE7除外)*{ margin:0; padding:0;}body{ margin:10px 10%; background:#666;}ul,原创 2011-08-03 19:32:51 · 4768 阅读 · 0 评论 -
javascript 标签控制图片顺滑滚动切换
move img#baobaophoto{ width:300px; height:200px; overflow:hidden; position:relative;}#bbimg{ position:absolute;}a:link原创 2011-08-03 12:54:17 · 1082 阅读 · 0 评论 -
由一段 “javascript css 照片切换代码” 引发的深入研究
javascript cssbody,ul,li{ margin:0; padding:0;}body{ padding:50px; background:#FEFCE7;}ul{ height:1%;/*触发IE hasLayout消原创 2011-08-01 17:14:14 · 744 阅读 · 0 评论 -
yui reset.css 2.9.0 全注释版
/*Copyright (c) 2011, Yahoo! Inc. All rights reserved.Code licensed under the BSD License:http://developer.yahoo.com/yui/license.html转载 2011-07-28 19:21:27 · 2199 阅读 · 1 评论 -
div包裹img,底部一小段空白bug
div img空白bugbody{ margin:0; padding:0;}div{ background:#000;}img{ display:block;}在div的底部,和img边缘之间有空白原创 2011-08-01 20:48:53 · 3960 阅读 · 0 评论 -
纠结的 hasLayout与overflow:hidden --- 清除浮动之谜
之前我在 zoom:1 和 overflow:hidden 日志中就说过zoom:1和overflow:hidden的功能是一致的,甚至用height:1%代替zoom:1也是一样效果其实我这篇日志想说的就是,IE专有的hasLayout是由zoom:1和height:1原创 2011-07-30 09:15:23 · 2860 阅读 · 0 评论 -
css打造自适应布局
test*{ margin:0; padding:0; color:#FFF;}.a{ background:#FF0000; width:100%; float:left; margin-right:-100px;}.b{原创 2011-07-30 10:11:21 · 1133 阅读 · 0 评论 -
float浮动 和 hasLayout 研究心得
float 浮动有三个用处:一是使得自身脱离文档流,使得父容器不会受其高度影响(IE6下给父容器触发hasLayout即可解决);二是使得后面的非浮动元素“顺流环绕”浮动元素(IE6下给右侧非浮动元素触发hasLayout即可剞劂);三是浮动元素的尺寸,如果未指定将按自身内部元素原创 2011-07-29 15:25:56 · 1769 阅读 · 3 评论 -
css3学习之placeholder,也就是占位符
什么是占位符?相信做过input搜索框的人都写过js版本的,那就是输入框默认的灰色文字,点击后消失,然后你可以输入你的关键字,如果你把你输入的关键字全部删除,那么一开始的灰色文字又出来了,我说的占位符就是这个灰色文字,在XHTML1.0的时候,我们要实现这个效果必须用javasc原创 2011-07-20 17:13:56 · 3538 阅读 · 0 评论 -
CSS学习,Pixy图像翻转和CSS精灵
测试Pixya{ display:block; width:100px; height:50px; text-indent:-200px; background:url(bj.png) -100px 0 no-repeat;}a:hover,原创 2011-07-20 21:17:11 · 1313 阅读 · 0 评论 -
CSS打造末尾自动伸缩的菜单
菜单1菜单2原创 2011-07-21 10:35:37 · 987 阅读 · 0 评论 -
CSS学习之纯CSS打造TIP提示效果,代替传统TITLE提示
测试css tipa.tooltip{ position:relative; line-height:18px;}a.tooltip span{ display:none;}a.tooltip:hover span{ position:ab原创 2011-07-20 21:44:39 · 2015 阅读 · 0 评论 -
CSS3学习之等高列
CSS3创造3列*{ margin:0; padding:0; }body { font: 12px "宋体"; margin: 20px;}h1 { font-size: 24px; font-weight:原创 2011-07-24 20:24:32 · 702 阅读 · 0 评论 -
IE6 浮动元素与非浮动元素在一起,3px偏移BUG解决方案
IE6 浮动元素与非浮动元素在一起,3px偏移BUG*{ margin:0; padding:0; font-size:12px;}.box{ width:220px; overflow:auto;}.leftbox{ backgr原创 2011-07-27 20:35:49 · 1301 阅读 · 0 评论 -
IE6 躲猫猫BUG的解决方案
IE6 躲猫猫BUG*{ margin:0; padding:0;}#box { background:#eee;} #float { float:left;} #clear { clear:both;}原创 2011-07-27 21:45:15 · 2252 阅读 · 0 评论 -
IE6的BUG,float浮动元素被非float元素挤到第二行
IE float浮动BUG新闻标题2011-07-21上面的效果,点击运行后可以查看下,firefox chrome都正常,但是ie6 ie8下 日期都换行显示了 IE float浮动BUG2011-07-21新闻标题原创 2011-07-21 13:49:00 · 1932 阅读 · 0 评论 -
IE6 浮动元素之间注释太多 导致重复字符BUG
IE6 浮动元素之间注释太多 导致重复字符BUG*{ margin:0; padding:0;}#repeatword_bug{ width:200px; height:200px; background:#F00;}#re_float原创 2011-07-27 21:16:14 · 1037 阅读 · 0 评论 -
兼容各个浏览器的CSS表格表框颜色
兼容各个浏览器的CSS表格表框颜色table{ border-collapse:collapse;}td{ background:#fff; border:1px solid #f90; height:22px;}原创 2011-07-20 15:34:43 · 704 阅读 · 0 评论 -
CSS3学习之box-sizing
顶部和尾部固定高度,中间自适应*{ margin:0; padding:0;}html{ /** 启用IE6的盒模型 也就是 padding和border 再改变也不影响容器整体的大小,也就是说内容区域是自适应大小了 boz-sizing另外有个值 c原创 2011-07-23 20:08:17 · 956 阅读 · 0 评论 -
css3学习之border-image
目前我测试的浏览器有Firefox,chrome可以支持,ie8 360 遨游都是ie内核均不支持,据说safari支持,可我touch不在身边,没法测试火狐firefox 谷歌chrome代码如下css3 9分格测试.test{width:200p原创 2011-07-20 11:12:32 · 909 阅读 · 0 评论 -
CSS3 berder-radius圆角矩形,box-shadow投影,各浏览器测试
css3圆角 投影测试.test{border-radius:5px;box-shadow:5px 5px 10px; background:#999; width:480px; height:272px;} 经测试,只有火狐firefox原创 2011-07-20 08:41:42 · 3243 阅读 · 0 评论 -
CSS打造分页式样
ol.pagenum{ list-style-type:none; margin:0; padding:0; font-size:12px;}ol.pagenum li{ float:left; margin-right:10px;}ol.原创 2011-07-21 21:11:40 · 528 阅读 · 0 评论 -
CSS打造导航菜单
CSS打造导航菜单ul.nav{ margin:0; padding:0; font-size:12px; list-style-type:none; width:450px; background:#FAA819 url(bj.gif) rep原创 2011-07-21 22:05:19 · 480 阅读 · 0 评论 -
关于CSS选择器的优先级,附上图片备忘
原文地址:点击打开链接转载 2011-07-23 10:17:02 · 534 阅读 · 0 评论 -
css学习之table
表格table .cal{ border-collapse:separate; border-spacing:0; text-align:center; color:#333;}.cal th, .cal td{ margin:0; pad原创 2011-07-24 10:27:44 · 545 阅读 · 0 评论 -
CSS学习之DIV容器任意分辨率浏览器下水平居中
容器任意分辨率下水平居中*{ margin:0; padding:0; }html,body{ width:100%; height:100%; text-align:center;}.wrapper{ w原创 2011-07-24 14:20:40 · 741 阅读 · 0 评论 -
外边距叠加
垂直外边距叠加*{ margin:0; padding:0;}.top{ background:#666; margin-bottom:10px; width:100px; height:100px;}.bottom{ back原创 2011-07-27 19:47:39 · 680 阅读 · 0 评论 -
IE6 相对定位容器中的绝对定位BUG
IE6 相对定位容器中的绝对定位BUG*{ margin:0; padding:0;}#box { background:#eee; border:1px solid #333; position:relative; text-align原创 2011-07-27 21:57:37 · 1626 阅读 · 0 评论 -
IE条件注释
下面一段代码是测试在微软的IE浏览器下的条件注释语句的效果:IE条件注释您正在使用IE浏览器版本 5版本 5.0版本 5.5版本 6版本 7版本 8原创 2011-07-27 19:02:35 · 573 阅读 · 0 评论 -
CSS学习之三列自适应等高
高度相等的列*{ margin:0; padding:0; }body { font: 12px "宋体"; margin: 20px; color: #fff;}h1 { font-size: 24px;原创 2011-07-24 19:57:50 · 834 阅读 · 0 评论