逆天的IE7中，詭異的橫向滾動條

時間 2019-11-13

原文原文鏈接

今天老鄒我又要吐槽IE7了，這個奇葩瀏覽器老是不讓省心。這回遇到的問題，灰常難發現是怎麼回事，不過仍是讓我發現緣由，哈哈，只要緣由去幹掉這個問題比躲避問題用別的辦法繞開要爽的多啊。css

首先我仍是介紹下，一般咱們的網頁裏會有文章列表或帖子列表等模塊，固然還有其餘的一些也會涉及這些，我主要說一說你們經常出現的狀況。老鄒我在這裏就用文章列表舉例說明。文章列表每每是每個項裏有文章標題、描述、做者和時間等等。長什麼樣子呢？html

請看下圖：瀏覽器

上面這個是我想要的效果。字體

可是我出現什麼問題了？你們再看下圖：spa

看到沒，在逆天的IE7模式下，竟然出現橫向滾動條了。讓我很是不理解，我怎麼得罪他了，他恰恰這麼對待我。通過我和他數小時的對戰，我終於知道他的弱點了。調試

起初我找緣由。用F12調試。找了半天，沒有找到究竟是哪裏超出了。難道有個幽靈在旁邊，這不科學。code

（。。。。。此處通過省略1w字。。。。。）orm

最後我把每一個右下角的時間去了。我靠，竟然正常了。原來是個人時間考的鬼，這爲毛啊？我因而再次詢問我又愛又恨的度娘。找到了一篇文章就是這個地址，有空你們能夠去看看，沒空就算了（文章地址：http://talkser.blog.163.com/blog/static/206457252201282555732752/）xml

大概意思是說浮動定位要給浮動元素具體的寬度，否則會有默認值去影響，去超出。htm

我想了想，我這裏的時間沒有給寬度，那就給一個吧。不錯，他正常了，因而我覺得浮動元素和絕對定位元素都要給寬度，否則會影響。反正是解決了。

（雖然解決了，可是仍是內心不舒服）

但是我轉頭想了想。若是我換了一個標籤會怎樣，（這裏和你們說明一下：個人時間一般用標記表示。他默認是斜體。）因而我把 標籤換成了標籤。竟然沒有任何異常。看來不是浮動定位和絕對定位的緣由。我想到：這兩個奇葩標籤都是行內標記，惟一的區別就是標記的字體是斜的，那好辦，我把標記描述成斜體，若是有問題，那麼就是這個斜體的問題。起初我就是無聊想試試，認爲不多是斜體的緣由。但是，後面發生的事情，我和個人小夥伴們都驚呆了，改爲斜體後，橫向滾動條出來了，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>