2011年11月27日

解决ie下JS提示“尚未实现 ”错误

Filed under: CSS » JS — cmpan @ 2011-11-27 04:43:48

鼠标经过链接的时候，总提示JS 1行、第xx个字符，错误信息是：“尚未实现 ”。从js入手调试了半天，解决不了问题。想到是不是css里的expression引起的，把链入的样式去掉，果真是。css的expression调用了ie不支持的方法引起js错误提示。IE这SB只知道第1行、第xx个字符出错了，不可信。

2011年05月22日

在布局复杂的网站页面中使用div+css网页栅格化布局

Filed under: CSS » 前端设计 — cmpan @ 2011-05-22 17:17:00

栅格化布局样式表生成工具

有些前端设计师使用div+css布局的时候，每次做页面都要花大量的时间去写布局的样式，再用n个浏览器来轮个遍去测试布局是否能兼容浏览器。这样把大把的青春花在布局上，感叹着table布局的便利。其实这个是很容易解决的。如果你碰到了这样的问题，并且还没有解决的，请继续往下看就很容易搞定了。
(全文 …)

2011年05月21日

CSS 952px 栅格化布局参考

Filed under: CSS — cmpan @ 2011-05-21 18:11:04
1
2
3
4
5
6
7
8
9
10
11
/* 栅格化布局 */
.grid { margin-right:8px; float: left; display: inline-block;}
.grid-6{ width:232px; }
.grid-8{ width:312px; }
.grid-9{ width:352px; }
.grid-12{ width:472px; }
.grid-16{ width:632px; }
.grid-18{ width:712px; }
.grid-24{ width:952px; }
.grid.grid-fixed {margin-right:0;}
/* End 栅格化布局 */

(全文 …)

2010年03月7日

关于浏览器中文本从上到下排列

Filed under: CSS — cmpan @ 2010-03-07 12:52:18

在ie中用 writing-mode: tb-rl; 就可以了
在firefox中，可以使用例如

-moz-transform: rotate(90deg);
-moz-transform-origin: 110px 180px;

的样式表来实现，但是却不敢恭维。主要是不好定位。把位置定住了，改变一下浏览器大小位置又变了，很难用。

2009年12月1日

css hack

Filed under: CSS — 标签：, — cmpan @ 2009-12-01 21:50:39

CSS hack

各浏览器CSS hack兼容表：





 
IE6
IE7
IE8
Firefox
Chrome
Safari




!important 
 
Y
 
Y
 
 




_
Y
 
 
 
 
 




*
Y
Y
 
 
 
 




*+
 
Y
 
 
 
 




\9
Y
Y
Y
 
 
 




\0
 
 
Y
 
 
 




nth-of-type(1)
 
 
 
 
Y
Y





例如


1
2
3
4
5
6
7
8
9
10
selector{ 

    property:value;    /* 所有浏览器 */ 

    property:value\9; /* 所有IE浏览器 */ 

    property:value !important; /* IE7, FF */

    *property:value;  /* IE6,IE7,IE8*/

    +property:value;  /* IE7 */ 

    property:value\0;  /* IE8 */ 

    _property:value;  /* IE6，IE8 */ 

    nth-of-type(1)property:value; /*Chrome，Safari*/

}

2009年08月17日

让IE支持 position: fixed;

Filed under: CSS — 标签： — cmpan @ 2009-08-17 02:39:43

IE默认不支持 position: fixed;的样式，我们需要通过hack来实现该功能。
fixed在左上角的层的样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style type="text/css">
#fixme {
    /* Netscape 4, IE 4.x-5.0/Win and other lesser browsers will use this */
  position: absolute; left: 20px; top: 10px;
}
body > div#fixme {
  /* used by Opera 5+, Netscape6+/Mozilla, Konqueror, Safari, OmniWeb 4.5+, iCab, ICEbrowser */
  position: fixed;
}
</style>
<!--[if gte IE 5.5]>
<![if lt IE 7]>
<style type="text/css">
div#fixme {
  /* IE5.5+/Win - this is more specific than the IE 5.0 version */
  left: expression( ( 20 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
  top: expression( ( 10 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}
</style>
<![endif]>
<![endif]-->

固定在右下角的层的样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style type="text/css">
#fixme {
  /* Netscape 4, IE 4.x-5.0/Win and other lesser browsers will use this */
  position: absolute; right: 20px; bottom: 10px;
}
body > div#fixme {
  /* used by Opera 5+, Netscape6+/Mozilla, Konqueror, Safari, OmniWeb 4.5+, iCab, ICEbrowser */
  position: fixed;
}
</style>
<!--[if gte IE 5.5]>
<![if lt IE 7]>
<style type="text/css">
div#fixme {
  /* IE5.5+/Win - this is more specific than the IE 5.0 version */
  right: auto; bottom: auto;
  left: expression( ( -20 - fixme.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
  top: expression( ( -10 - fixme.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}
</style>
<![endif]>
<![endif]-->

也可以写成

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style type="text/css">
#fixme {
  /* used by Opera 5+, Netscape6+/Mozilla, Konqueror, Safari, OmniWeb 4.5+, iCab, ICEbrowser,IE7 */
  position: fixed;
  right: 20px;
  bottom: 10px;

  /* IE 4.x-6.x,ie8 will use this */
  _position: absolute;
  _right: auto;
  _bottom: auto;
  _left: expression( ( -20 - fixme.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
  _top: expression( ( -10 - fixme.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}
</style>

2009年08月14日

一些常用兼容性CSS技巧记录

Filed under: CSS — 标签：, , , , , , , , , , , , — cmpan @ 2009-08-14 13:19:15
1
2
/* 1 鼠标经过指针显示为手型 */
cursor:pointer;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/* 2 透明层里的层都透明，要把不透明的层放在透明层外 */
.opaque {
/* for IE8 */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* for IE5-7 */
filter: alpha(opacity=50);
/* for all other browsers */
opacity: .5;
}
/* 3 长单词自动换行（没有任何空格的英文字符和半角标点符号串） */
* {word-wrap:break-word; word-break:break-all;}
/* IE6下对多有标签起作用，ff3.5下只在定宽容器标签中(比如p、div)有效，
而非容器标签或非定宽容器标签中无作用 */

/* 4 li在ie和firefox下的兼容性问题 */
/*
两点因素：
1).在ie下如果为li指定高度可能会出现排版错位，用line-height即可。
2).ie下list-style-position默认为inside,firefox默认为outside,css中指定为outside即可解决兼容性问题。
*/

/* 5 IE加注释段尾重影bug */
在段末加入
<p style="padding: 0; margin: 0;">&nbsp;</p>

/* 6 使链接点击没有边框 */
a:focus {outline:none}  /* ie8+, 其他浏览器 */
<a href=”#” hidefocus=”true” >hidefocus</a>  /* ie6/7 */
/* 不要使用<a href="#"  onfocus="this.blur()">this blur</a>，
否则按Tab键到该链接光标将跳回到第一个链接，影响盲人阅读 */

 

层垂直居中于浏览器窗口

Filed under: CSS — 标签： — cmpan @ 2009-08-14 10:01:08

思路：首们需要position:absolute;绝对定位。而层的定位点，使用margin负值的方法。负值的大小为层自身宽度高度除以二。
　　如：一个层宽度是400，高度是300。使用绝对定位距离上部与左部都设置成50%。而margin-top的值为－150。margin-left的值为－200。这样我们就实现了层垂直居中于浏览器的样式编写。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!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=utf-8" />
<title>mb5u.com</title>
<style type="text/css">

div {
    position:absolute;
    top:50%;
    left:50%;
    margin:-150px 0 0 -200px;
    width:400px;
    height:300px;
    border:1px solid red;
    }

</style>
</head>
<body>
<div>mb5u.com - Div CSS布局 常见问题</div>
</body>
</html>

兼容各浏览器的透明效果

Filed under: CSS — 标签：, — cmpan @ 2009-08-14 09:30:27
1
2
3
4
5
.opaque {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";  /* for IE8 */
    filter: alpha(opacity=50);  /* for IE5-7 */
    opacity: .5;  /* for all other browsers */
}

IE下高度100%的绝对定位自适应布局

Filed under: CSS — cmpan @ 2009-08-14 09:19:24

把body看作是一个容器，做为内部对象的上层标签，他的高度设置为100%是关键。
#box 高度100%的样式
html,body { height:100%;}
#box { position: absolute; height:100%; background:#000;}

Copyright © 2009 流水孟春 版权所有
Web技术,LAMP,Nginx,Web2.0,前端技术
Powered by WordPress & UI Designed by 流水孟春