表宽度问题，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

回答

相关问题