一、CSSHACK以下两种方法几乎能解决现今所有HACK.翻阅很多资料,已测试可以使用。
1,!important
PLAINTEXTCSS:
#wrapper{width:100px!important;/*IE7+FF*/width:80px;/*IE6*/}
2,IE6/IE77对FireFox
*+html与*html是IE特有的标签,firefox暂不支持.而*+html又为IE7特有标签.
#wrapper{#wrapper{width:120px;}/*FireFox*/*html#wrapper{width:80px;}/*ie6fixed*/*+html#wrapper{width:60px;}/*ie7fixed,注意顺序*/}
PLAINTEXTHTML:
关于clearfloat的原理可参见[HowToClearFloatsWithoutStructuralMarkup]将以下代码加入GlobalCSS中,给需要闭合的div加上class=”clearfix”即可,屡试不爽.
/*ClearFix*/.clearfix:after{content:“.”;display:block;height:0;clear:both;visibility:hidden;}.clearfix{display:inline-block;}/*HidefromIEMac*/.clearfix{display:block;}/*EndhidefromIEMac*//*endofclearfix*/三、其他兼容技巧(再次啰嗦)
1针对firefoxie6ie7的css样式现在大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,但是ie7对!important可以正确解释,会导致页面没按要求显示!找到一个针对IE7不错的hack方式就是使用“*+html”,现在用IE7浏览一下,应该没有问题了。现在写一个CSS可以这样:
#1{color:#333;}/*Moz*/*html#1{color:#666;}/*IE6*/*+html#1{color:#999;}/*IE7*/那么在firefox下字体颜色显示为#333,IE6下字体颜色显示为#666,IE7下字体颜色显示为#999。
2css布局中的居中问题主要的样式定义如下:
body{TEXT-ALIGN:center;}#center{MARGIN-RIGHT:auto;MARGIN-LEFT:auto;}说明:首先在父级元素定义TEXT-ALIGN:center;这个的意思就是在父级元素内的内容居中;对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT:auto;MARGIN-LEFT:auto;”需要说明的是,如果你想用这个方法使整个页面要居中,建议不要套在一个DIV里,你可以依次拆出多个div,只要在每个拆出的div里定义MARGIN-RIGHT:auto;MARGIN-LEFT:auto;就可以了。
3盒模型不同解释.
#box{width:600px;//forie6.0-w\idth:500px;//forff+ie6.0}#box{width:600px!important//forffwidth:600px;//forff+ie6.0width/**/:500px;//forie6.0-}4浮动ie产生的双倍距离
#box{float:left;width:100px;margin:000100px;//这种情况之下IE会产生200px的距离display:inline;//使浮动忽略}这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,…不可控制(内嵌元素);
#box{display:block;//可以为内嵌元素模拟为块元素display:inline;//实现同一行排列的的效果diplay:table;5IE与宽度和高度的问题
IE不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。这样问题就大了,如果只用宽度和高度,正常的浏览器里这两个值就不会变,如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。比如要设置背景图片,这个宽度是比较重要的。要解决这个问题,可以这样:
#box{width:80px;height:35px;}html>body#box{width:auto;height:auto;min-width:80px;min-height:35px;}6页面的最小宽度
min-width是个非常方便的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。但IE不认得这个,而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用,可以把一个
#container{min-width:600px;width:expression(document.body.clientWidth<600“600px”:“auto”);}第一个min-width是正常的;但第2行的width使用了Javascript,这只有IE才认得,这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。
7清除浮动
.hackbox{display:table;//将对象作为块元素级的表格显示}或者.hackbox{clear:both;}或者加入:after(伪对象),设置在对象后发生的内容,通常和content配合使用,IE不支持此伪对象,非Ie浏览器支持,所以并不影响到IE/WIN浏览器。这种的最麻烦的……
#box:after{content:“.”;display:block;height:0;clear:both;visibility:hidden;}8DIV浮动IE文本产生3象素的bug
左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距.
#box{float:left;width:800px;}#left{float:left;width:50%;}#right{width:50%;}*html#left{margin-right:-3px;//这句是关键}HTML代码<divid=“box”><divid=“left”></div><divid=“right”></div></div>9属性选择器(这个不能算是兼容,是隐藏css的一个bug)
p[id]{}div[id]{}这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.
10IE捉迷藏的问题
当div应用复杂的时候每个栏中又有一些链接,DIV等这个时候容易发生捉迷藏的问题。有些内容显示不出来,当鼠标选择这个区域是发现内容确实在页面。解决办法:对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。
11高度不适应
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节,特别是当内层对象使用margin或paddign时。例:
<divid=“box”><p>p对象中的内容</p></div>CSS:#box{background-color:#eee;}#boxp{margin-top:20px;margin-bottom:20px;text-align:center;}解决方法:在P对象上下各加2个空的div对象CSS代码:.1{height:0px;overflow:hidden;}或者为DIV加上border属性。
网页常用代码-未整理27Jun,2008NoComment
如内容超出单元格,则隐藏style=”TABLE-LAYOUT:fixed”
各种样式的光标auto:标准光标default:标准箭头hand:手形光标wait:等待光标text:I形光标vertical-text:水平I形光标no-drop:不可拖动光标not-allowed:无效光标help:帮助光标all-scroll:三角方向标move:移动标crosshair:十字标e-resizen-resizenw-resizew-resizes-resizese-resizesw-resize
文本竖排方式
网页搜索关键字头里插入
我的电脑file:///::{20D04FE0-3AEA-1069-A2D8-08002B30309D}网上邻居file:///::%7B208D2C60-3AEA-1069-A2D7-08002B30309D%7D我的文档file:///::%7B450D8FBA-AD25-11D0-98A8-0800361B1103%7D控制面板file:///::{20D04FE0-3AEA-1069-A2D8-08002B30309D}/::{21EC2020-3AEA-1069-A2DD-08002B30309D}回收站file:///::%7B645FF040-5081-101B-9F08-00AA002F954E%7D
鼠标控制图片隐现效果把如下代码加入<body>区域中:
禁止图片下载
页嵌页
隐藏滚动条 CSS文字阴影(定义在 列表/菜单onchange=”location=this.options[this.selectedIndex].value” reurl=server.htmlencode(request.ServerVariables(”HTTP_REFERER”)) 服务器上如何定义连接MM_www_STRING=”driver={MicrosoftaccessDriver(*.mdb)};dbq=”&server.mappath(”../data/www.mdb”) onClick=”window.location=’login.asp’”onClick=”window.open(”)” 取得IPuserip=Request.ServerVariables(”HTTP_X_FORWARDED_FOR”)Ifuserip=“”Thenuserip=Request.ServerVariables(”REMOTE_ADDR”) sql=”updatefeedbaksethit=hit+1whereid=”&request(”id”)conn.execute(sql) 截取字符是否加…functionformatStr(str,len)if(len(str)>len)str=left(str,len)+“…”endifformatStr=strendfunction 接收表单IfUcase(Request.ServerVariables(”REQUEST_METHOD”))=“POST”thenendif 图片宽度 溢出栏的设制visible:超出的部分照样显示;hidden:超出的部分隐藏;scrool:不管有否超出,都显示滚动条;auto:有超出时才出现滚动条; onMouseOver:鼠标移到目标上;onMouseUp:按下鼠标再放开左键时;onMouseOut:鼠标移开时;onMouseDown:按下鼠标时(不需要放开左键);onClink:点击时;onDblClick:双击时;onLoad:载入网页时;onUnload:离开页面时;onResize:当浏览者改变浏览窗口的大小时;onScroll:当浏览者拖动滚动条的时。 CSS样式a:link:表示已经链接;a:hover:表示鼠标移上链接时;a:active:表示链接激活时;a:visited:表示己点击过的链接。 跳出对话框链接javascript:alert(’lajflsjpjwg’)后退:javascript:history.back(1)关闭窗口:javascript:window.close();窗口还原functionrestore(){window.moveTo(8,8);window.resizeTo(screen.width-24,screen.availHeight-24);} head区是指首页HTML代码的 2.网页显示字符集简体中文: 3.网页制作者信息 4.网站简介 5.搜索关键字 7.网页标题 .可以选择加入的标签 2.禁止浏览器从本地机的缓存中调阅页面内容。 3.用来防止别人在框架里调用你的页面。 5.网页搜索机器人向导.用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。 所有的javascript的调用尽量采取外部调用. 附 flash透明在flash的源代码中加上: 状态栏连接说明 禁止鼠标右键在 DW里输入空格插入N个 水平线 邮件链接定制Mailto:地址Subject=邮件的标题&bc=抄送&bcc=密件抄送 背景音乐 禁止页面正文选取 消除ie6自动出现的图像工具栏,设置GALLERYIMG属性为false或no. 防止点击空链接时,页面往往重置到页首端。代码“javascript:void(null)”代替原来的“#”标记 如何避免别人把你的网页放在框架中 显示日期 定义鼠标body{cursor:url(cur.ani或cur);} 层在flash上面 导航条变色:单元格 居中 空链接javascript:; 标题表格 细线表格style=”BORDER-COLLAPSE:collapse;” 滚动条颜色代码BODY{SCROLLBAR-FACE-COLOR:#FFFFFF;SCROLLBAR-HIGHLIGHT-COLOR:#FFFFFF;SCROLLBAR-SHADOW-COLOR:#FFFFFF;SCROLLBAR-3DLIGHT-COLOR:#FFCBC8;SCROLLBAR-ARROW-COLOR:#FFFFFF;SCROLLBAR-TRACK-COLOR:#FFFFFF;SCROLLBAR-DARKSHADOW-COLOR:#FFCBC8;SCROLLBAR-BASE-COLOR:#FFFFFF} 连续的英文或者一堆感叹号!!!不会自动换行的问题只要在CSS中定义了如下句子,可保网页不会再被撑开了 table{table-layout:fixed;}td{word-break:break-all;word-wrap:break-word;} 注释一下: 1.第一条table{table-layout:fixed;},此样式可以让表格中有!!!(感叹号)之类的字符时自动换行。 2.td{word-break:break-all},一般用这句这OK了,但在有些特殊情况下还是会撑开,因此需要再加上后面一句{word-wrap:break-word;}就可以解决。此样式可以让表格中的一些连续的英文单词自动换行。中).abc{FILTER:dropshadow(color=#666666,offx=1,offy=1,positive=1);FONT-FAMILY:“宋体”;FONT-SIZE:9pt;COLOR:#ffffff;}