表寬度問題，html css

我已經做了一個表，其中沒有填寫CHROME & SAFARI的父div的全寬。表寬度問題，html css

這在Firefox中正常工作，但我想在所有瀏覽器中工作。

在這裏的一些看法後，我發現，在某些情況下，鉻可以固定父格設置爲...

display: block; width: 100%;

..但問題仍然存在。

另外還發現了另外兩個情況，其中指定沒有保證金&填充，所以給了一個鏡頭，仍然存在問題在Chrome瀏覽器中顯示& Safari。

的HTML

<div class='player_box info_pic_2'> 
    <div style='display: block; width: 100%;'> 
     <table style='margin: 0; padding: 0; width: 100%; border-style: solid; border-width: 1px; position: absolute; left: 0; top: 0; right: 0px; height: 30px;'> 
       <tr class='border_bottom'> 
        <td>CELL A</td> 
        <td>CELL B</td> 
       </tr> 
     </table> 
     <table style='margin: 0; padding: 0; width: 100%; border-style: solid; border-width: 1px; position: absolute; left: 0; right: 0px; top: 30px;'> 
      <tr class='border_bottom'> 
       <td>ROW A </td> 
      </tr> 
      <tr class='border_bottom'> 
       <td>ROW B </td> 
      </tr> 
      <tr class='border_bottom'> 
       <td>ROW C </td> 
      </tr> 
      <tr class='border_bottom'> 
       <td>ROW D </td> 
      </tr> 
      <tr class='border_bottom'> 
       <td>ROW E </td> 
      </tr> 
      <tr class='border_bottom'> 
       <td>ROW F </td> 
      </tr> 
     </table> 
    </div> 
</div>

的CSS

tr.border_bottom td { 
    border-bottom:1pt solid black; 
} 
.info_pic_2 { 
    position: absolute;; 
    height: 250px; 
    top: 130px; 
    right: 70px; 
    width: 350px; 
    max-width: 100%; 
    display: block; 
    border-style:solid; 
    border-width:5px; 
    color: black; 
} 
.player_box { 
    border:solid 4px #000000; 
    -moz-border-radius-topleft: 33px; 
    -moz-border-radius-topright:32px; 
    -moz-border-radius-bottomleft:32px; 
    -moz-border-radius-bottomright:32px; 
    -webkit-border-top-left-radius:33px; 
    -webkit-border-top-right-radius:32px; 
    -webkit-border-bottom-left-radius:32px; 
    -webkit-border-bottom-right-radius:32px; 
    border-top-left-radius:33px; 
    border-top-right-radius:32px; 
    border-bottom-left-radius:32px; 
    border-bottom-right-radius:32px; 
    text-align:center; background:#575757; 
    padding:100px 50px 100px 50px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px; 
    opacity: 0.8; 
}

來源

2013-05-31 Hush Pro

我已經添加了一個JSFiddle爲此：http://jsfiddle.net/rcQmW/ –

您的問題似乎是在你的.player_box選擇的padding值（倒數第二行。刪除填充，它會填寫正確。

來源

2013-05-31 23:14:37

哇。謝謝，我不相信我錯過了它。傳奇隊友歡呼！ –

哈無後顧之憂！只是一個有幫助的提示，我儘可能將我的造型保留在CSS中。當我在一個地方尋找時，追蹤這些小東西非常容易！另外它還可以讓SO上的人們更容易在這裏幫忙。 –

我可以把它的行爲改變這個CSS更好：

.info_pic_2 { 
    position: absolute; 
    height: 250px; 
    top: 130px; 
    right: 70px; 
    width: 350px; 
    max-width: 100%; 
    display: block; 
    border-style: solid; 
    border-width: 5px; 
    color: black; 
}

到：

.info_pic_2 { 
    height: 250px; 
    top: 130px; 
    right: 70px; 
    max-width: 100%; 
    display: block; 
    border-style: solid; 
    border-width: 5px; 
    color: black; 
}

我發現，混合絕對定位和百分比寬度是一場噩夢。

編輯：填充並沒有幫助，但看到我在這裏更新版本：在你的CSS

http://jsfiddle.net/rcQmW/2/

來源

2013-05-31 23:14:19

乾杯，沒有幫助這種情況下，發現我有填充值＃ player_box css這是造成這個問題。感謝您的幫助 –

表寬度問題，html css

回答

相關問題