一、CSS HACK
以下两种方法几乎能解决现今所有HACK.
1, !important
随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)
<style>
#wrapper
{
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */
}
</style>
2, IE6/IE77对FireFox
*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.
<style>
#wrapper
{
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 fixed */
*+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序 */
}
</style>
注意:
*+html 对IE7的HACK 必须保证HTML顶部有如下声明：
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd“>
二、万能 float 闭合
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=GB2312″ />
<meta name=”Author” content=”Aultoale” />
<style type=”text/css”>
body {font:normal 12px Verdana}
a#tip {position:relative;left:75px; font-weight:bold;}
a#tip:link,a#tip:hover {text-decoration:none;color:#000;display:block}
a#tip span {display:none;text-decoration:none;}
a#tip:visited {color:#000;text-decoration:underline;}
a#tip:hover #tip_info {display:block;border:1px solid #F96;background:#FFEFEF;padding:10px 20px;position:absolute;top:0px;left:90px;color:#009933}
</style>
</head>
<body>
<a id=”tip” href=”#”>
移到这里试试!
<span id=”tip_info”>这里是提示信息!</span>
</a>
</body>
</html>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>DIV+CSS+JS制作滑动折叠的文字效果</title>
</head>
<style type=”text/css”>
<!–
body,div,ul,li,p,h1,h2{ margin:0; padding:0; border:0; background:#FAFAFA; font-family:Arial, Helvetica, sans-serif,”宋体”}
body{ text-align:center; font-size:12px}
li{ list-style:none}
.rolinList{ width:402px; height:auto; margin:20px auto 0 auto; text-align:left}
.rolinList li{margin-bottom:1px;border:1px solid #DADADA}
.rolinList li h2{ width:380px; height:40px; background:#fff; font-size:14px; line-height:40px; padding-left:20px; color:#333; cursor:pointer}
.content{ height:150px;width:400px; background:#fff; background:#FAFAFA}
.content p{ margin:12px}
–>
</style>
<script type=”text/javascript”>
//<![CDATA[
window.onload = function() {
rolinTab("rolin")
}
function rolinTab(obj) {
var list = $(obj).getElementsByTagName("LI");
var state = {show:false,hidden:false,showObj:false};
for (var i=0; i<list.length; i++) {
var tmp = new rolinItem(list[i],state);
if (i == 0) tmp.pShow();
}
}
function rolinItem(obj,state) {
var speed = 0.0666;
var range = 1;
var interval;
var tarH;
var tar = this;
var head = getFirstChild(obj);
var content = getNextChild(head);
var isOpen = false;
this.pHidden = function() {
if (isOpen) hidden();
}
this.pShow = show;
var baseH = content.offsetHeight;
content.style.display = “none”;
var isOpen = false;
head.onmouseover = function() {
this.style.background = “#EFEFEF”;
}
head.onmouseout = mouseout;
head.onclick = function() {
this.style.background = “#EFEFEF”;
if (!state.show && !state.hidden) {
if (!isOpen) {
head.onmouseout = null;
show();
} else {
hidden();
}
}
}
function mouseout() {
this.style.background = “#FFF”
}
function show() {
head.style.borderBottom = “1px solid #DADADA”;
state.show = true;
if (state.openObj && state.openObj != tar ) {
state.openObj.pHidden();
}
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=gb2312″ />
<title>CSS首字下沉</title>
<style type=”text/css”>
.dyfirst {
width:300px;
border:1px solid #ddd;
padding:5px;
font-size:12px;
margin:5px 0;
}
.dyfirst:first-line {
color:#050;
}
.dyfirst:first-letter {
font-size:300%;
font-weight:bold;
color:#000;
float:left;
}
</style>
</head>
<body>
<div> To the world you may be one person, but to one person you may be theworld. Never frown, even when you are sad, because you never know who is fallingin love with your smile. </div>
<div> 对于世界而言，你是一个人；但是对于某个人，你是他的整个世界。纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。 </div>
</body>
</html>
<style type=”text/css”>
* {margin:0; padding:0;}
body {font:normal 12px/1.5em Verdana, Lucida, Arial, Helvetica, “宋体”, sans-serif;background:#FCFCFC;}
.wrapper {width:200px;height:200px;position:absolute;top:50%;left:50%;margin:-100px 0 0 -100px;border:1px solid #333333;background:#CCCCCC;}
.content {width:180px;height:160px;margin:10px auto 0;overflow:hidden;border:1px solid #999999;background:#FFFFFF;}
.box {float:left;width:160px;height:150px;margin-bottom:10px;padding:10px;overflow:auto;}
.pager {width:180px;height:20px;margin:5pxauto;text-align:right;}
.pager a {padding:2px 4px;text-decoration:none;background:#FF0000;color:#FFFFFF;}
.pager a:hover {background:#FFFFFF;outline:#FF0000 1px solid;color:#000000;}
</style>
<div>
<div id=”a1″><h2>锚点控制内容</h2><p>第一屏</p><p>网上有很多这样的教程，我这个只是娱乐而已</p></div>
<div id=”a2″><h2>锚点控制内容</h2><p>第二屏</p></div>
<div id=”a3″><h2>锚点控制内容</h2><p>第三屏</p></div>
<div id=”a4″><h2>锚点控制内容</h2><p>第四屏</p></div>
<div id=”a5″><h2>锚点控制内容</h2><p>第五屏</p><p>第五屏</p><p>第五屏</p><p>第五屏</p><p>第五屏</p><p>第五屏</p><p>第五屏</p><p>第五屏</p><p>第五屏</p><p>第五屏</p></div>
</div>
<div>
<a title=”" href=”#a1″>1</a>
<a title=”" href=”#a2″>2</a>
<a title=”" href=”#a3″>3</a>
<a title=”" href=”#a4″>4</a>
<a title=”" href=”#a5″>5</a>
</div>
看到一些网站的底边下的工具条或是导航条效果很不错，FACEBOOK的很经典，自己也研究了一下简单的实现了功能 代码如下，IE6可能会有问题因为用到了position:fixed 虽然使用了_position:absolute;做兼容处理 但没有用IE6做测试
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>position:fixed</title>
</head>
<style>
.m-chat-box{position:fixed;_position:absolute;z-index:99999;width:100%;bottom:0}
.m-chat{position:relative;height:34px;background:url(http://i3.sinaimg.cn/lx/deco/2007/1229/yocc071229img/eladies_home_bg_002.gif) repeat-x ;border-left:1px solid #b5b5b5;border-right:1px solid#b5b5b5;margin:0 70px 0 15px;}
</style>
</head>
<body>
<br />1111<br />1111<br />1111<br />1111<br />1111<br />1111<br />1111<br/>1111<br />
1111<br />1111<br />1111<br />1111<br />1111<br />1111<br/>1111<br />1111<br />1111<br />
1111<br />1111<br />1111<br />1111<br/>1111<br />1111<br />1111<br />1111<br />1111<br />
1111<br />1111<br/>1111<br />1111<br />1111<br />1111<br />1111<br />1111<br />1111<br/>
<br />1111<br />1111<br />1111<br />1111<br />1111<br />1111<br />1111<br/>1111<br />
1111<br />1111<br />1111<br />1111<br />1111<br />1111<br/>1111<br />1111<br />1111<br />
1111<br />1111<br />1111<br />1111<br/>1111<br />1111<br />1111<br />1111<br />1111<br />
1111<br />1111<br/>1111<br />1111<br />1111<br />1111<br />1111<br />1111<br />1111<br/>
<div>
<div>
position:fixed
</div>
</div>
</body>
</html>
下面的是我在网上找到的方法 一起记录在这吧
.fixed-top /* 头部固定 */{position:fixed;bottom:auto;top:0px;}
.fixed-bottom /* 底部固定 */{position:fixed;bottom:0px;top:auto;}
.fixed-left /* 左侧固定 */{position:fixed;right:auto;left:0px;}
.fixed-right /* 右侧固定 */{position:fixed;right:0px;left:auto;}
/* 上面的是除了IE6的主流浏览器通用的方法 */
* html,* html body /* 修正IE6振动bug */{background-image:url(about:blank);background-attachment:fixed;}
* html .fixed-top /* IE6 头部固定 */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));}
* html .fixed-right /* IE6 右侧固定 */ {position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));}
* html .fixed-bottom /* IE6 底部固定 */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
* html .fixed-left /* IE6 左侧固定 */{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft));}
这个效果很酷，用在菜单和列表上是最好不过了，我只是简单的实现了功能 ， 美化没怎么做 ，喜欢的话可以自己再改改，IE7 FF测试通过
<script>
var moveNum = 110; //移动总像素
var leftNum = 25; //距左端像素
function openMenu(){
var y = moveNum;
function closelist(){
document.getElementById(‘list’).style.left=y+”px”;
y–
if(y==leftNum){clearInterval(intv);}
}
intv=setInterval(closelist,1);
}
function closeMenu(){
var y = leftNum;
function showlist(){
document.getElementById(‘list’).style.left=y+”px”;
y++;
if(y==moveNum){clearInterval(intv);}
}
intv=setInterval(showlist,1);
}
</script>
<div style=”margin-left:200px;width:110px;height:100px;background:#eeeeee;overflow:hidden”>
<div style=”width:20px;height:100px;background:#00FF00;float:right;” onclick=”openMenu()”>打开</div>
<div id=”list” name=”list” style=”float:right;height:100px;width:90px;background:#FF0000;left:110px;position:relative ;z-index:10;” >
<div style=”float:left;width:20px;height:100px;background:#0000FF;” onclick=”closeMenu()”>关闭</div>
<div style=”float:left;”>fdsfdf<br />fdsfsf</div>
</div>
</div>
语法:STYLE=”filter:filtername(fparameter1,fparameter2…)}(Filtername为滤镜的名称，fparameter1、fparameter2等是滤镜的参数)
滤镜说明：
Alpha：设置透明层次.
blur：创建高速度移动效果，即模糊效果.
Chroma：制作专用颜色透明.
DropShadow：创建对象的固定影子.
FlipH：创建水平镜像图片.
FlipV：创建垂直镜像图片.
glow：加光辉在附近对象的边外.
gray：把图片灰度化.
invert：反色.
light：创建光源在对象上.
mask：创建透明掩膜在对象上.
shadow：创建偏移固定影子.
wave：波纹效果.
Xray：使对象变的像被x光照射一样.
More »
图型变换代码如下.
23.随机变换效果 type=”progid:DXImageTransform.Microsoft.RevealTrans(enabled=ture,transition=23)”
0.方形逐渐变小 type=”progid:DXImageTransform.Microsoft.Iris(irisstyle=square,motion=in)”
交叉形逐渐变大 type=”progid:DXImageTransform.Microsoft.Iris(irisstyle=cross,motion=out)”
菱形逐渐变小 type=”progid:DXImageTransform.Microsoft.Iris(irisstyle=diamond,motion=in)”
1.方形逐渐变大 type=”progid:DXImageTransform.Microsoft.Iris(irisstyle=square,motion=out)”
交叉形逐渐变小 type=”progid:DXImageTransform.Microsoft.Iris(irisstyle=cross,motion=in)”
菱形逐渐变大 type=”progid:DXImageTransform.Microsoft.Iris(irisstyle=diamond,motion=out)”
2.圆形逐渐变小 type=”progid:DXImageTransform.Microsoft.Iris(irisstyle=circle,motion=in)”
加号形逐渐变大 type=”progid:DXImageTransform.Microsoft.Iris(irisstyle=plus,motion=out)”
星形逐渐变小 type=”progid:DXImageTransform.Microsoft.Iris(irisstyle=star,motion=in)”
More »
<DIV STYLE=”width: 120px; height: 50px; border: 1px solid blue;
overflow: hidden; text-overflow:ellipsis”>
<NOBR>文字过长时，一行显示不下，就会把过长的部分去掉用省略号代替<NOBR>
</DIV>
相关文章：
php内容长度截取 ： http://www.dyphp.com/?p=371
Previous Entries
Categories
Tag Cloud
Blog RSS
Comments RSS
Last 50 Posts
Back
Void 
Life 
Earth 
Wind 
Water 
Fire