超出容器部分内容显示省略号的可行方案
一个Web项目中有装载数据的表格,表格列可以拖拽调整宽度,在IE下可用text-overflow:ellipsis样式实现 超出列宽的内容以省略号代替,无奈标准浏览器不支持。网上的许多方案也不完美,有的利用hack手法能在Firefox下显示省略号,但是在字符没有超过宽度的情况下也会显示。如果用前端脚本来处理的话又感觉浪费了性能。最后采取了火狐的如下方式:

一个Web项目中有装载数据的表格,表格列可以拖拽调整宽度,在IE下可用text-overflow:ellipsis样式实现 超出列宽的内容以省略号代替,无奈标准浏览器不支持。网上的许多方案也不完美,有的利用hack手法能在Firefox下显示省略号,但是在字符没有超过宽度的情况下也会显示。如果用前端脚本来处理的话又感觉浪费了性能。最后采取了火狐的如下方式:
!important一般用来做区分IE6和Firefox等浏览器的基本Hack手法。因为IE6不支持!important,而Firefox能读懂!important,其改变了样式的优先级。其实IE6在某些情况下,也能认识!important。
今天碰到一个问题:当一个容器设定overflow:auto之后,如果有一个<input>设定绝对定位,并且刚好定位到那个容器的上面,则在Firefox2下,鼠标focus到input中,不能看到本应该闪动的光标。定位了好久才发现是设定了overflow:auto的原因。
今天实现一个表格,需要表头不能被选中。设置节点unselectable=’on’,在IE起作用,但是在FF没有效果,后来发现如果要让FF生效应该在样式中设置如下: -moz-user-select:none。
聊当记录。
CSS2.1 中规定了关于 CSS 规则 Specificity(特异性)的计算方式,用一个四位的数字串(注:CSS2 中是用三位)来表示,最后以 Specificity 的高低判断 CSS 的优先权。
发现很多朋友对 CSS 的优先权不甚了解,规则很简单。需要说明的一点,如果你的样式管理需要深层判断 CSS 的优先权,更应反思自己的 CSS 代码,是否合理?是否优化?
编写网页的时候,一般都没有把命名规则认真对待。在结合语义以及搜索优化两方面给出了一套命名方案,对增强阅读性、规范性和提高开发效率是有帮助的,当然,这方面的规范,仁者见仁智者见智,网上有许多前辈们以经验总结的类似规则,具体怎么用,大家还是因人制宜吧。仅做记录,方便后续查阅。
前端的用户体验现在显得越来越重要,从后台开发,到前台技术很多工作都围绕如何提高前端用户体验而展开。我们也许能从这篇文章里获取一些有用的信息,用到自己的实际项目工作中。这篇文章的作者来自yahoo的异常表现小组。他们是一个很小的队伍,专门针对雅虎的产品进行质量检测和改进,该作者作为一个后端工程师,现在却开始捣鼓前端代码优化方面的工程,他认为这是一个极好的进步的机会。他的目标是改进用户端体验,他度量了在各个带宽下浏览器的响应时间,得出如下的一个图表,它展示了来自http://yahoo.com的http的流量。现在我们来好好学习一下:
文中提到了:少用偏门;center不是float的值;对齐不能包括两个值;滚动条颜色最好不要自定义;单独滚动条设置;background和color颜色相同会受到警告等六条经验总结。
一、少用偏门。
类似break-word断行,z-index手动分层,还有像垂直对齐等等这些偏门CSS最好少用,因为不一定所有浏览器都支持,而且极难通过W3C检测。
我受这个问题困扰已久。之前站点的正文中如果出现中英文混排,就会出现中英文对不齐现象,如果是超链接里中英文兼有,则会出现下划线折行,严重影响美观,当然Firefox等标准浏览器没有此问题,IE7以上也无此问题。后来将内容所在容器增添vertical-align:middle,问题解决了。可最近在站点左列加入牛人指点栏目时,下面中英文混排的内容再现对不齐现象,用以前的方法也不能解决。
IE8都来了,IE6还会撑多久?很多人以为IE6已经死了,也许只有前端开发者这样认为,现实世界中IE6的使用者大有人在,不过不会维持很久,IE8已经推出,微软对IE8的推广不遗余力,同时,不少人从IE转到别的浏览器,总有一天,IE6会被弃之如敝履,没有人愿意再提起,到那时,会有10件事大快人心,大喊爽哉……