随笔分类 -  css+html

IE6bug-overflow不能隐藏的bug
摘要：今天在做一个页面的时候在ie6下遇到了一个问题，困扰了好一会，于是乎小生google了一下，才明白了这是个ie6下的bug。在这里向大家分享一下！如有不对之处还请多多指教！bug说明：ie6下父元素设置了overflow:hidden,子元素或者是后代元素设置了position:relative，那么父元素的overflow属性失效。解决办法：给父元素设置position:relative属性。上图中父元素设置了overflow:hidden,其他浏览器都可以正常隐藏，而ie6下确不起作用，就是因为后代元素设置了position:relative。 阅读全文
posted @ 2013-12-04 11:04 梦飞无颜 阅读(208) 评论(0) 推荐(0)
IE6 PNG透明终极解决方案
摘要：1 - 滤镜解决方案：介绍：滤镜从IE4.0被微软正式引入，所以我们可以使用滤镜解决IE6的PNG透明问题，滤镜不仅可以实现目前CSS3的一些旋转效果而且还可以引入图片。注意：此方法在部分版本的IETest中无效，建议使用标准的IE6来进行测试！思路： 1、书写正常的CSS代码，通过background导入图片，这样所有的浏览器均使用了此PNG图片； background:url(../images/W3CfunsLogo.png); 2、通过滤镜对引入图片，滤镜引入图片的时候是相对于HTML文件，而不是相对于CSS文件，语法如下： filter:progid:DXImageT... 阅读全文
posted @ 2013-11-07 15:05 梦飞无颜 阅读(260) 评论(0) 推荐(0)
html中用IE条件判断
摘要：HTML 的注释格式是 ， IE 对HTML注释做了一些扩展，使之可以支持条件判断表达式，如何让静态HTML代码在不同IE版本显示不同内容？和编程语言类似，这里的表达式还支持大于(gt)、小于(lt)、 与或非 等操作符，条件注释是 IE5.0 以上版本所特有的一种对注释的扩展，其它浏览器不支持。[if IE] 判断是否IE[if IE 7] 判断是否是IE7[if !IE] 判断是否不是IE[if lt IE 5.5] 判断是否是IE5.5 以下版本。 ( ）[if gte IE 7] 判断是否 IE7 版本或者以上[if !(IE 7)] 判断是否不是IE7[if (gt IE 5)&am 阅读全文
posted @ 2013-10-30 14:18 梦飞无颜 阅读(464) 评论(0) 推荐(0)
收集的CSS浏览器兼容问题大全（粘贴过来，会用到的）
摘要：不P话了！呵呵CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理 方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声明.CSS技巧1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。 缺点是要控制内容不要换行2. margin加倍的问题 设置为float的div在ie下设置的margin 阅读全文
posted @ 2013-10-14 11:54 梦飞无颜 阅读(164) 评论(0) 推荐(0)
移动网站开发系列（一）
摘要：移动客户端对meta的定义有几项通用定义：第一个meta标签表示：强制让文档与设备的宽度保持1：1；文档最大的宽度比列是1.0（initial-scale初始刻度值和maximum-scale最大刻度值）；user-scalable定义是否可缩放（0为不缩放），使页面固定设备上面的大小。（注意：实际测试中发现，HTC G7自身系统浏览器不支持这一条规则，能够对页面进行放大，一旦放大响应的box也随之放大，导致俄页面出现错乱问题，解决方法：定义页面的最小宽度 min-width，body{min-width:300px;}）第二个meta标签表示：使设备浏览网页时对数字不启用电话功能（不同设备解 阅读全文
posted @ 2013-10-11 15:13 梦飞无颜 阅读(144) 评论(0) 推荐(0)
解决ie6下最小高度问题
摘要：解决IE6的最小高度问题：_height:auto !important;_height:200px; /*假定最低高度是200px*/min-height:200px; 阅读全文
posted @ 2013-10-09 16:57 梦飞无颜 阅读(71) 评论(0) 推荐(0)
display:inline-block的深入理解
摘要：在使用 CSS 实现表现的时候，会经常接触到 display:inline-block 这一属性，无论是初接触 Web 标准还是接触标准已久的朋友，大都会对这一属性感觉很迷惑和模糊。display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。但对于这个属性不是所有浏览器都识别。支持的浏览器有：Opera、Safari。但很遗憾，最流行的 IE 和 Firefox 却不支持这个属性（在 Firefox3 版本中将会支持 display:inline-block）。不过 Firefox 下却有私有属性 -moz-inlin 阅读全文
posted @ 2013-10-09 16:52 梦飞无颜 阅读(156) 评论(0) 推荐(0)
ff下button按钮上的文字垂直居中
摘要：在Firefox下input type=”button”的文字是不好居中的，原因在于Firefox自己弄了个私有属性，解决方法很简单，遇到类似问题的朋友可以学习下，希望可以帮助到大家很老的问题了，如今再次碰到，记录下来，给后来者方便！ 众所周知，在Firefox下input type=”button”的文字是不好居中的，原因在于Firefox自己比较二，弄了个私有属性，导致以下问题的出现： 1.按钮左右本身有2px的间距（FF私有属性写了padding:0 2px所致）； 2.按钮文字居中是不行的（此时设置padding-bottom是没用的） ； 3.等等… 解决办法： input[type 阅读全文
posted @ 2013-09-26 15:33 梦飞无颜 阅读(445) 评论(0) 推荐(0)
css布局容易范的一些错误
摘要：随着CSS网页布局越来越普及，国内大部分网站已经采用CSS网页布局的制作方法。在应用DIV+CSS编码时很容易犯一些错误，这里列举一些常见的错误，帮助新手朋友更好的学习与进步。一、检查HTML元素是否有拼写错误 是否忘记结束标记 即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。 二、检查CSS是否正确检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。 三、确定错误发生的位置如果错误影响了整体布局，则可以逐个删除div块，直到删除某个... 阅读全文
posted @ 2013-05-09 10:05 梦飞无颜 阅读(204) 评论(0) 推荐(0)
html标签默认属性值之margin;padding值
摘要：针对6大主流浏览器（Chrome,Firefox,Safari,Opera,Maxthon,IE6,7,8),单位为px.一.h1~h6标签：有默认margin（top,bottom且相同）值，没有默认padding值。在chrome中：16,15,14,16,17,19;在firefox中：16,15,14,16,17,20;在safari中：16,15,14,16,17,19;在opera中：16,15,14,14,17,21;在maxthon中：16,14,14,15,16,18;在IE6.0中：都是19；在IE7.0中：都是19；在IE8.0中：16,15,14,16,17,19;二. 阅读全文
posted @ 2013-04-26 15:50 梦飞无颜 阅读(532) 评论(0) 推荐(0)
CSS中单位px和em的区别解析
摘要：你对CSS中单位px和em的区别是否了解，这里和大家分享一下，px像素（Pixel），相对长度单位，像素px是相对于显示器屏幕分辨率而言的；而em也是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。彻底弄懂CSS中单位px和em的区别国内的设计师大都喜欢用px，而国外的网站大都喜欢用em，那么两者有什么区别，又各自有什么优劣呢？1.IE无法调整那些使用px作为单位的字体大小；2.国外的大部分网站能够调整的原因在于其使用了em作为字体单位；3.Firefox能够调整px和em，但是96%以上的中国网民使用IE浏览器(或内核)。p 阅读全文
posted @ 2013-04-24 12:06 梦飞无颜 阅读(146) 评论(0) 推荐(0)
js多物体运动框架
摘要：1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; c 阅读全文
posted @ 2013-04-17 16:15 梦飞无颜 阅读(195) 评论(0) 推荐(0)
ie6下bug集合（二）---li之间空隙bug
摘要：我们在制作页面的时候，li与li之间会有我们并不想要的空隙，如图：View Code 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Co 阅读全文
posted @ 2013-04-11 12:08 梦飞无颜 阅读(161) 评论(0) 推荐(0)
ie6下bug集合（一）---ie6基偶bug
摘要：1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; c 阅读全文
posted @ 2013-04-11 11:26 梦飞无颜 阅读(118) 评论(0) 推荐(0)
大小不固定的图片和多行文字的垂直水平居中
摘要：1.多行文字的垂直居中，关键在于 display:table-cell 属性，请看下面的代码：View Code 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http- 阅读全文
posted @ 2013-04-09 17:53 梦飞无颜 阅读(175) 评论(0) 推荐(0)
关于团队合作的css命名规范
摘要：常用的css命名规则：头：header内容：content/container尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体布局宽度：wrapper左右中：left right center登录条：loginbar标志：logo广告：banner页面主体：main热点：hot新闻：news下载：download子导航：subnav菜单：menu子菜单：submenu搜索：search友情链接：friendlink页脚：footer版权：copyright滚动：scroll内容：content标签页：tab文章列表：list提示信息：msg小技巧：tips栏目 阅读全文
posted @ 2013-03-29 16:49 梦飞无颜 阅读(171) 评论(0) 推荐(0)
解决IE6下 position的fixed定位问题
摘要：html{_background:url(about:blank); /* 阻止IE6闪动 , 把空文件连接换成about:blank , 减少请求 */}/* 图层 */.pFixed{position:fixed;_position: absolute;_top:expression(documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight);_left:expression(documentElement.scrollLeft+documentElement.clientWidth-this.offs 阅读全文
posted @ 2013-03-28 16:49 梦飞无颜 阅读(124) 评论(0) 推荐(0)