网页设计师必备CSS小贴士

资讯 驱动中国 若水 1,350 次阅读 0 条评论
分享 Q
1、连续的英文或数字能是容器被撑大,不能根据容器的大小自动换行。解决方法:《css之自动换行》 。连续的标点符号也不会转行,用属性 word-break:break-all; 无法达到效果,可以选用属性 word-wrap: break-word; 来解决!
2、有序列表的 li 在 IE 中,定了宽后,序号就变为1;定了浮动后,就没有了序号,Firefox 却不同。IE 认为:列表本来就不把序号算在实体内。
3、根据 CSS1,class 或 id 属性的值不能以数字 (0-9) 开头。更早版本的 Internet Explorer 允许这些值以数字开头。
4、在用 :after 方式清除浮动时,切记不要在 content:”"; 的引号中加任何字符,包括网上常见方式的点“.”,在opera下会产生问题。
div:after {
content:"";
display:block;
clear:both;
visibility:hidden;
height:0;
}
5、 opera 不支持 overflow-x 和 overflow-y ,而 IE6,IE7,Firefox,Safari 支持。当使用 overflow-y 来实现某种效果时,要注意 opera 下的表现,折中的方法为先定义 overflow:hidden 属性,在定义overflow-y:auto 或者 overflow-x:auto 属性。当然这仅是折中的方法,必然有他的局限性。
6、 background-position 属性定义的顺序为水平位置、垂直位置。比如定义 background-position:top left; 虽然顺序颠倒了位置,但所有的浏览器都能识别。因为 top 和 left 为可识别位置属性,但如果换个定义方式 background-position:20px left; 此属性只会在 IE 中正常显示,在其他浏览器中却认为是无效的定义,难得 IE 的“智能”。
7、对于使用小于已知大小容器的图片垂直居中的方法时,当 diplay:table-cell;vertical-align:middle; 的已知大小容器,放置于 table 中的 td or th 使用是有问题的,此时可以给已知道大小容器加一层div并设置其属性为 display:table;margin:0 auto; 来解决。
版权声明:本文由驱动中国整理发布,转载需注明出处与原文链接。如有疑问请联系 editor@qudong.com
本文价值 成为第一个评分的人
登录后为本文打分
网友评论0 条评论
正在回复 的评论取消
评论加载中…
🔐

登录后参与互动

评论、点赞均可赚积分
连续签到、邀请好友也有奖励 🎁

电脑端: 微信扫码登录 微信内: 一键登录

微信扫一扫

打开微信「扫一扫」,分享本文到朋友圈或好友