WebKit 与 Firefox CSS答案

【问题标题】：WebKit vs. Firefox CSSWebKit 与 Firefox CSS
【发布时间】：2013-07-14 16:12:32
【问题描述】：

我在 Chrome、Safari 和 WebKit 与 Firefox 上的 CSS 存在问题。

在 Firefox 上，表格行大小的背景图像看起来很合适。在 Chrome 上，边缘被切断。

http://stage.schoolforcreativestartups.com/fees-funding/

我该如何解决？

<table style="text-align: left; width: 100%;" border="1" cellpadding="2" cellspacing="2">
    <tbody>
    <tr style="background-image: url('http://stage.schoolforcreativestartups.com/wp-content/uploads/2013/07/yello‌w_stripe.png'); background-repeat: no-repeat;background-position: center top;border-collapse:collapse;">
        <td style="vertical-align: top; font-weight: bold;font-size: 25px; padding-top:14px;padding-left:12px;color:#5A5494">
            Angel Society Bursary<br></td>
        <td>&pound;1,000<br></td>
        <td>&pound;2,500<br></td>
        <td>Unlimited*<br></td>
    </tr>
    </tbody>
</table>

【问题讨论】：

你应该把 CSS 和 HTML 放在这里
不是这里的人......在问题中，就像每个用户一样。它看起来像压缩的 HTML5，不可读
抱歉，我已经修改了我的帖子。感谢您的反馈意见。一些注意事项：这不是 HTML5，而是简单的 HTML（3 或 4）表格。而且，它没有被压缩。如果您提到它的缩小，SO 会自动执行此操作。再次感谢您的反馈！
我建议更改标题以总结问题，现在它不是真正的描述性...

标签： css firefox safari

【解决方案1】：

经过一番研究，我遇到了另一个 Stack Overflow 问题 here，但您也可以这样做：

<tr>
 <td>
   <table style="background-image: url('http://stage.schoolforcreativestartups.com/wp-content/uploads/2013/07/yello‌w_stripe.png'); background-repeat: no-repeat;background-position: center top;border-collapse:collapse;">
     <tr>
       <td style="vertical-align: top; font-weight: bold;font-size: 25px; padding-top:14px;padding-left:12px;color:#5A5494">
        Angel Society Bursary<br></td>
      <td>&pound;1,000<br></td>
      <td>&pound;2,500<br></td>
      <td>Unlimited*<br></td>
     </tr>
   </table>
 </td>
 <td>&pound;1,000<br></td>
 <td>&pound;2,500<br></td>
 <td>Unlimited*<br></td>
</tr>

【讨论】：