最新消息:

FIREFOX / IE Word-Wrap:Word-Break问题

技术相关 12浏览 0评论

用的是wpzone.netfresh 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 标签:,,,,

转载请注明:出家如初,成佛有余 » FIREFOX / IE Word-Wrap:Word-Break问题

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (0)

  1. 终于找到了,试试看
    淘宝网购物女装9年前 (2010-05-19)回复