2016年02月28日

手机UI设计基础-尺寸&单位

Filed under: CSS » WEB — cmpan @ 2016-02-28 20:16:59

初入移动端开发和UI设计的童鞋可能对UI尺寸和单位特头痛,孟春觉得分享一下手机APP/Web UI尺寸和单位的经验是有价值的。
(全文 …)

Views – 2085

2011年12月4日

IE兼容性bug汇总

Filed under: CSS — cmpan @ 2011-12-04 19:20:08

项目最新版本的开发进入后期阶段,今天鼓起勇气打开IE Test,如我所料啊!页面在IE6下面目全非了,呜呜~~

现在开始修复IE的Bug(大部分是IE6,IE7 8也有一些),顺便记录下来。
(全文 …)

Views – 3912

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个字符出错了,不可信。

Views – 2226

2011年05月22日

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

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

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

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

Views – 1951

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 栅格化布局 */

(全文 …)

Views – 1852

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;

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

Views – 1735

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*/
}

Views - 1309

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>

Views – 2237

2009年08月14日

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

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键到该链接光标将跳回到第一个链接,影响盲人阅读 */

 

Views – 2381

层垂直居中于浏览器窗口

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>

Views – 2237

兼容各浏览器的透明效果

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 */
}

Views – 2339

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;}

Views – 2031

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