出家如初,成佛有余

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

Posted in Uncategorized by chuanliang on 2007/10/23

用的是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 */

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, “Courier New”, courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

修改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

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, “Courier New”, courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, “Courier New”, courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

参考文档:

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 标签:,,,,

No Responses Yet

Subscribe to comments with RSS.

  1. 淘宝网购物女装 said, on 2010/05/19 at 16:28

    终于找到了,试试看


发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s

%d 博主赞过: