對鉻

2015-02-07 44 views
0

我有一個表寬度的錯誤,這裏是Chrome的截圖: enter image description here 這裏是在Firefox(IE瀏覽器完全相同) enter image description here 在底部的按鈕顯示在同一個表有一個額外的像素(只有一些resoslutions),我不明白爲什麼這隻發生在鉻,但是。所有的CSS都在下面的代碼中。對鉻

<style> 
     @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,700); 
     @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700); 
     @import url(http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700); 
     button > .fa 
     { 
     margin:0; 
     margin-right:5px; 
     } 
     button:hover 
     { 
     background-color:#3C8DBC; 
     color:#ffffff; 
     } 
     button 
     { 
     width:100px; 
     text-align:center; 
     padding:0; 
     background-color:#F9F9F9; 
     margin:5px; 
     border-radius:8px; 
     border:1px solid #3C8DBC; 
     color:#3C8DBC; 
     font-size:16px; 
     margin-left:0; 
     font-family:'Source Sans Pro'; 
     } 
     body 
     { 
     margin:0; 
     background-color:#F9F9F9; 
     } 
     ul 
     { 
     font-size:0; 
     margin:0; 
     padding:0; 
     float:left; 
     width:12%; 
     height: 100%; 
     background-color:#F4F4F4; 
     border-right:1px solid #EFEFEF; 
     } 
     .fa 
     { 
     margin-left:10px; 
     margin-right:10px; 
     } 
     li 
     { 
     border-top:1px solid #FFFFFF; 
     border-bottom:1px solid #DBDBDB; 
     font-weight:300; 
     font-size:16px; 
     width:100%; 
     float:left; 
     background-color:#F4F4F4; 
     height:40px; 
     line-height:40px; 
     color:#222222; 
     font-family:roboto; 
     } 
     li:hover 
     { 
     background-color:#F9F9F9; 
     } 
     .topbar > span 
     { 
     font-family:24px; 
     line-height:50px; 
     color: #fff; 
     font-size:24px; 
     font-family:'Source Sans Pro'; 
     margin-left:20px; 
     } 
     .topbar 
     { 
     bottom-border:2px solid #000000; 
     width:100%; 
     background-color:#3C8DBC; 
     height:50px; 
     float:left; 
     } 
     .list1 
     { 
     font-size:0; 
     margin:0; 
     } 
     .list1 > li 
     { 
     background-color:red; 
     text-align:center; 
     font-size:16px; 
     display:inline-block; 
     width:25%; 
     } 
     span:nth-of-type(2) 
     { 
     margin-right:20px; 
     float:right; 
     font-size:20px; 
     } 
     .title > h1 
     { 
     font-size:32px; 
     height:auto; 
     width:auto; 
     margin:0; 
     } 
     table 
     { 
     border-collapse:collapse; 
     display:inline-block; 
     width:100%; 
     } 

     .contents 
     { 
     border-spacing:0px; 
     display:inline-block; 

     width:60%; 
     height:auto; 
     font-family:'Open Sans'; 
     } 
     .fa 
     { 
     font-size:14px; 
     } 
     a > .fa 
     { 
     font-size:13px; 
     margin-left:2px; 
     } 
     td > a > button:hover 
     { 
     border-color:gray; 
     background-color:gray; 
     } 
     td > a > button 
     { 
     margin:3px; 
     width:110px; 
     margin:0; 
     border-radius:0; 
     border-color:gray; 
     color:gray; 
     } 
     h2 
     { 
     border-top:1px solid #DFDFDF; 
     margin:0; 
     font-size:16px; 
     font-weight:500; 
     font-family:'Open Sans'; 
     padding:0; 
     padding-bottom:5px; 
     padding-top:5px; 
     width:100%; 
     text-align:center; 
     } 

     .bottom 
     { 
     display:inline-block; 
     color:black; 
     margin:0; 
     width:100%; 
     padding:0; 
     border:0; 
     border-radius:0; 
     margin-bottom:30px; 
     border-color:#DFDFDF; 
     padding-bottom:5px; 
     padding-top:5px; 
     border-top:0; 
     } 
     .bottom:hover 
     { 
     color:black; 
     -webkit-transition:background-color 2s; 
     background-color:#DFDFDF; 
     } 
    </style> 



    <div class="topbar"> 
     <span> 
     Admin Panel 
     </span> 
     <span> 
     Logged in as {user} 
     </span> 
    </div> 

    <ul class="mainbar"> 
     <a href="#"> 
     <li> 
      <i class="fa fa-home"> 
      </i> 
      Home 
     </li> 
     </a> 
     <a href="#"> 
     <li> 
      <i class="fa fa-file"> 
      </i> 
      Pages 
     </li> 
     </a> 
     <a href="#"> 
     <li> 
      <i class="fa fa-database"> 
      </i> 
      Items 
     </li> 
     </a> 
     <a href="#"> 
     <li> 
      <i class="fa fa-envelope-o"> 
      </i> 
      Quote Requests 
     </li> 
     </a> 
     <a href="#"> 
     <li> 
      <i class="fa fa-money"> 
      </i> 
      Sales 
     </li> 
     </a> 
    </ul> 
    <div class="contents"> 
     <div class="title"> 
     <h1> 
      Editing page : 
     </h1> 

     </div> 
     Page Style ID : 
     Category ID : 
     <br> 
     <h2> 
     Page Category Sizes 
     </h2> 
     <table class="1"> 
     <tbody> 
      <tr> 
      <td> 
       ID 
      </td> 
      <td> 
       Text 
      </td> 
      <td> 
       Edit 
      </td> 
      </tr> 
      <tr> 
      <td> 
       1 
      </td> 
      <td> 
       1 
      </td> 
      <td> 
       <a href="#"> 
       <button class=""> 
        Edit 
       </button> 
       </a> 
      </td> 
      </tr> 
     </tbody> 
     </table> 
     <button type="submit" class="bottom"> 
     <i class="fa fa-plus"> 
     </i> 
     Add 
     </button> 
     <br> 
     <h2> 
     Page Category Industries 
     </h2> 
     <table> 
     <tr> 
      <td> 
      ID 
      </td> 
      <td> 
      Text 
      </td> 
      <td> 
      Edit 
      </td> 
     </tr> 
     <tr class="1"> 
      <td> 
      1 
      </td> 
      <td> 
      1 
      </td> 
      <td> 
      <a href="#"> 
       <button class=""> 
       Edit 
       </button> 
      </a> 
      </td> 
     </tr> 
     </table> 
     <button type="submit" class="bottom"> 
     <i class="fa fa-plus"> 
     </i> 
     Add 
     </button> 
     <br> 
     Page Content: 
     <table> 
     <tr> 
      <td> 
      ID 
      </td> 
      <td> 
      Image URL 
      </td> 
      <td> 
      Image Text 
      </td> 
     </tr> 
     <tr> 
      <td> 
      1 
      </td> 
      <td> 
      1 
      </td> 
      <td> 
      1 
      </td> 
     </tr> 
     </table> 
     <button type="submit" class="bottom"> 
     <i class="fa fa-plus"> 
     </i> 
     Add 
     </button> 
    </div> 
    </div> 
+0

這是目前JSFiddle的代碼,但它不會複製你的截圖?:http://jsfiddle.net/jsr1xbks/ – 2015-02-07 13:25:10

+0

謝謝,我不知道爲什麼同樣的問題沒有發生在jsfiddle雖然。 – Batzz 2015-02-07 13:26:48

+0

你確定你已經包含了所有的代碼嗎? – 2015-02-07 13:28:08

回答

0

我在Chrome上遇到同樣的問題。 我通過刪除font-family「Open Sans」來解決問題。