逆天的IE7中，诡异的横向滚动条
?????? 今天老鄒我又要吐槽IE7了，這個奇葩瀏覽器總是不讓省心。這回遇到的問題，灰常難發現是怎么回事，不過還是讓我發現原因，哈哈，只要原因去干掉這個問題比躲避問題用別的辦法繞開要爽的多啊。
?????? 首先我還是介紹下，通常我們的網頁里會有文章列表或帖子列表等模塊，當然還有其他的一些也會涉及這些，我主要說一說大家常常出現的情況。老鄒我在這里就用文章列表舉例說明。文章列表往往是每一個項里有文章標題、描述、作者和時間等等。長什么樣子呢？
?????? 請看下圖：
??
上面這個是我想要的效果。
但是我出現什么問題了？大家再看下圖：
?
?
?
??????看到沒，在逆天的IE7模式下，居然出現橫向滾動條了。讓我非常不理解，我怎么得罪他了，他偏偏這么對待我。經過我和他數小時的對戰，我終于知道他的弱點了。
起初我找原因。用F12調試。找了半天，沒有找到到底是哪里超出了。難道有個幽靈在旁邊，這不科學。
（。。。。。此處經過省略1w字。。。。。）
??????最后我把每個右下角的時間去了。我靠，居然正常了。原來是我的時間考的鬼，這為毛啊？我于是再次詢問我又愛又恨的度娘。找到了一篇文章就是這個地址，有空大家可以去看看，沒空就算了（文章地址：http://talkser.blog.163.com/blog/static/206457252201282555732752/）
大概意思是說浮動定位要給浮動元素具體的寬度，不然會有默認值去影響，去超出。
????? 我想了想，我這里的時間沒有給寬度，那就給一個吧。不錯，他正常了，于是我以為浮動元素和絕對定位元素都要給寬度，不然會影響。反正是解決了。
????? （雖然解決了，但是還是心里不舒服）
????? 可是我轉頭想了想。如果我換了一個標簽會怎樣，（這里和大家說明一下：我的時間通常用<i>標記表示。他默認是斜體。）于是我把?<i>標簽換成了<span>標簽。居然沒有任何異常。看來不是浮動定位和絕對定位的原因。我想到：這兩個奇葩標簽都是行內標記，唯一的區別就是<i>標記的字體是斜的，那好辦，我把<span>標記描述成斜體，如果有問題，那么就是這個斜體的問題。起初我就是無聊想試試，認為不可能是斜體的原因。可是，后面發生的事情，我和我的小伙伴們都驚呆了，改成斜體后，橫向滾動條出來了，IE7，你的節操何在啊？
原來搞了半天是這個原因。
所以解決辦法也有。有兩種。
第一：如果你要保留斜體，那么就給你的標記加上一個固定高。
第二：如果不要斜體，那么就加上font-style:normal;就好了。
當然我還是用的在浮動定位里套的絕對定位。這樣可以準確和簡單定位。
我另外也弄了幾個注釋，大家可以試一試，IE7的調試真的很有意思哦。希望大家多多分享你的問題。
具體代碼如下：
1 <!DOCTYPE html> 2 3 <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <meta charset="utf-8" /> 6 <title></title> 7 <style type="text/css"> 8 * { 9 margin: 0; 10 padding: 0; 11 } 12 13 .clear { 14 clear: both; 15 } 16 17 .main { 18 width: 1100px; 19 margin: 20px auto; 20 border: 1px solid red; 21 padding-bottom: 10px; 22 } 23 24 .main .block { 25 width: 495px; 26 height: 100px; 27 margin: 10px 0 0 30px; 28 padding: 5px; 29 background: #eee; 30 float: left; 31 position: relative; 32 } 33 34 .main .block h3 { 35 margin: 8px 0 0 8px; 36 } 37 38 .main .block h3 a { 39 font-family: 微軟雅黑; 40 font-size: 16px; 41 text-decoration: none; 42 } 43 44 .main .block p { 45 font-family: 微軟雅黑; 46 font-size: 14px; 47 text-indent: 2em; 48 color: gray; 49 } 50 51 .main .block span { 52 position: absolute; 53 right: 0px; 54 bottom: 0px; 55 font-family: Arial; 56 font-size: 12px; 57 color: #666; 58 font-style: italic; /*如果不用斜體，改成normal，也不用下面的寬度了*/ 59 width: 100%; /*如果保留斜體，請給一個具體寬度*/ 60 } 61 62 /*.main .block i { 63 position: absolute; 64 right: 0px; 65 bottom: 0px; 66 font-family:Arial; 67 font-size:12px; 68 color:#666; 69 } 70 這里是i標記，可以和span替換的玩一玩 71 */ 72 </style> 73 </head> 74 <body> 75 <div class="main"> 76 <div class="block"> 77 <h3><a href="#">我是文章的標題哦</a></h3> 78 <p> 79 我是文章的描述哦，我是文章的描述哦，我是文章的描述哦，我是文章的描述哦,我是文章的描述哦，我是文章的描述哦，我是文章的描述哦，我是文章的描述哦，我是文章的描述哦，我是文章的描述哦... 80 </p> 81 <span>2014-4-14</span> 82 <!--<i>2014-4-14</i>--> 83 </div> 84 <div class="block"> 85 <h3><a href="#">我是文章的標題哦</a></h3> 86 <p> 87 我是文章的描述哦，我是文章的描述哦，我是文章的描述哦，我是文章的描述哦,我是文章的描述哦，我是文章的描述哦，我是文章的描述哦，我是文章的描述哦，我是文章的描述哦，我是文章的描述哦... 88 </p> 89 <span>2014-4-14</span> 90 <!--<i>2014-4-14</i>--> 91 </div> 92 <div class="block"> 93 <h3><a href="#">我是文章的標題哦</a></h3> 94 <p> 95 我是文章的描述哦，我是文章的描述哦，我是文章的描述哦，我是文章的描述哦,我是文章的描述哦，我是文章的描述哦，我是文章的描述哦，我是文章的描述哦，我是文章的描述哦，我是文章的描述哦... 96 </p> 97 <span>2014-4-14</span> 98 <!--<i>2014-4-14</i>--> 99 </div> 100 <div class="block"> 101 <h3><a href="#">我是文章的標題哦</a></h3> 102 <p> 103 我是文章的描述哦，我是文章的描述哦，我是文章的描述哦，我是文章的描述哦,我是文章的描述哦，我是文章的描述哦，我是文章的描述哦，我是文章的描述哦，我是文章的描述哦，我是文章的描述哦... 104 </p> 105 <span>2014-4-14</span> 106 <!--<i>2014-4-14</i>--> 107 </div> 108 <div class="block"> 109 <h3><a href="#">我是文章的標題哦</a></h3> 110 <p> 111 我是文章的描述哦，我是文章的描述哦，我是文章的描述哦，我是文章的描述哦,我是文章的描述哦，我是文章的描述哦，我是文章的描述哦，我是文章的描述哦，我是文章的描述哦，我是文章的描述哦... 112 </p> 113 <span>2014-4-14</span> 114 <!--<i>2014-4-14</i>--> 115 </div> 116 <div class="block"> 117 <h3><a href="#">我是文章的標題哦</a></h3> 118 <p> 119 我是文章的描述哦，我是文章的描述哦，我是文章的描述哦，我是文章的描述哦,我是文章的描述哦，我是文章的描述哦，我是文章的描述哦，我是文章的描述哦，我是文章的描述哦，我是文章的描述哦... 120 </p> 121 <span>2014-4-14</span> 122 <!--<i>2014-4-14</i>--> 123 </div> 124 <div class="clear"></div> 125 </div> 126 </body> 127 </html>?
?為本人原創，在此發表。
?如有問題可以與本人聯系
?鄒學良? Terry Zou
?QQ:1526348043
?新浪微博:http://weibo.com/coolsbook
?騰訊微博:http://t.qq.com/CoolsBook
?更多關注請訪問:http://www.coolsbook.com
?原文地址:http://www.coolsbook.com/Post/p/165
轉載于:https://www.cnblogs.com/CoolsBook/p/3664019.html
總結
以上是生活随笔為你收集整理的逆天的IE7中，诡异的横向滚动条的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： javascript设计模式--java
- 下一篇： 关于程序设计