在網(wǎng)吧客戶端項(xiàng)目中使用了frame的方式,布局如下:
遇到的問題是當(dāng)main中的內(nèi)容超過main的指定高度時(shí),會(huì)同時(shí)出現(xiàn)豎向和橫向滾動(dòng)條,這是一種極不好的用戶體驗(yàn),理想狀態(tài)應(yīng)該是只出現(xiàn)豎向滾動(dòng)條,我嘗試了如下解決方法:
1.直接添加body屬性<body style="overflow-x:hidden;">,結(jié)果是無效;
(分析原因:overflow-x是IE獨(dú)有的 css 屬性,加上DTD的話可能會(huì)被忽略,就像定制滾動(dòng)條顏色的css屬性一樣)
2.去掉DOCTYPE聲明<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">以后,橫向滾動(dòng)條被限制了,目的雖然達(dá)到,但是假設(shè)采用div+css布局的話,去掉文檔聲明會(huì)引發(fā)更多的問題,所以還需要嘗試一些其它的方式;
3.在使用iframe的情況下,可以不刪除DOCTYPE聲明,設(shè)置scrolling="yes",<body style="overflow-x:hidden;">也能生效。
以上是我做的一些嘗試,知其然而不知其所以然,但是希望能夠在工作中解決一些實(shí)際問題。
遇到的問題是當(dāng)main中的內(nèi)容超過main的指定高度時(shí),會(huì)同時(shí)出現(xiàn)豎向和橫向滾動(dòng)條,這是一種極不好的用戶體驗(yàn),理想狀態(tài)應(yīng)該是只出現(xiàn)豎向滾動(dòng)條,我嘗試了如下解決方法:
1.直接添加body屬性<body style="overflow-x:hidden;">,結(jié)果是無效;
(分析原因:overflow-x是IE獨(dú)有的 css 屬性,加上DTD的話可能會(huì)被忽略,就像定制滾動(dòng)條顏色的css屬性一樣)
2.去掉DOCTYPE聲明<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">以后,橫向滾動(dòng)條被限制了,目的雖然達(dá)到,但是假設(shè)采用div+css布局的話,去掉文檔聲明會(huì)引發(fā)更多的問題,所以還需要嘗試一些其它的方式;
3.在使用iframe的情況下,可以不刪除DOCTYPE聲明,設(shè)置scrolling="yes",<body style="overflow-x:hidden;">也能生效。
以上是我做的一些嘗試,知其然而不知其所以然,但是希望能夠在工作中解決一些實(shí)際問題。