用的是wpzone.net的fresh wordpress主题,很烦人的是在Internet Explorer下如果content或sidebar的内容部分一行的内容过长,则经常出现sidebar被挤到页面最下端的情况,而在firefox下没有此种现象。一般出现在如下几种情况:
- 图片太大超过了width
- url太长没有正常换行,超过了width
- 代码太长没有正常换行,超过了width
究其原因是因为对于无空格连续长字符,IE与Firefox将它看成是一个长单词了,因此不会自动换行。
对于IE,可以通过IE专有的CSS属性word-wrap即可实现自动换行:word-wrap:break-word;
对于Firefox,CSS2标准并没有定义类似word-wrap的属性,可以通过overflow属性将撑出的部分隐藏:overflow:hidden
因此为了兼容性,可以使用如下方法:
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
修改fresh theme的style.css文件,在#content和#sidebar中增加上述属性以及pre属性
#content { color:#000; display:inline; float:left; font-size:14px; line-height:1.5em; text-align:left; width:635px; margin:13px 0 0 20px; padding:0 0 20px 0px; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #sidebar { display:inline; background-color:#fff; float:right; font-size:12px; width:230px; line-height:1.4em; padding:20px 20px; margin:15px 20px 15px 0; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }
pre { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ }
另外对于firefox和opera可以采用javascript方式来避免overflow:hidden的弊端,具体实现可以参考:
Script word-wrap to Firefox – updated version
参考文档:
http://users.tkk.fi/~tkarvine/pre-wrap-css3-mozilla-opera-ie.html
http://elmicoxcodes.blogspot.com/2007/06/script-word-wrap-to-firefox-updated.html
http://jiarry.bokee.com/5871385.html
http://bbs.blueidea.com/thread-2692909-1-1.html
http://www.positioniseverything.net/explorer/expandingboxbug.html
Technorati 标签:wordpress,css,overflow,word-wrap,break-word