在除Firefox之外的所有浏览器中背景破碎

Question

我有一个gwt项目，该项目有一个面板，在其中将样式名称添加到了“ dock”。 当我在Firefox中打开应用程序时，一切都很好，但是在Chrome，Safari和IE中，背景并不完整。 这是我的CSS代码：

.dock {
background: #e3e8f3 url(img/hborder.png) repeat-x 0px -1000px;
padding: 4px 4px 4px 8px;
width: 100%;
margin: 0;
position: relative; 
}

这就是它在Firefox中的外观（应该看起来像这样） 屏幕截图

这就是在其他浏览器（例如chrome）中的外观： 屏幕截图

任何想法如何纠正这一点？ 提前致谢。

[编辑：]

这是gwt生成的html代码：

<table cellspacing="0" cellpadding="0" class="dock" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;">
    <tbody>
        <tr>
            <td align="left" style="vertical-align: top;">
                <button type="button" class="gwt-Button gwt-Button-helpButton" title="Zoek hulp"></button>
            </td>
            <td align="left" style="vertical-align: top;">
                <button type="button" class="gwt-Button gwt-Button-browseButton" title="Blader door de database."></button>
            </td>
            <td align="left" style="vertical-align: top;">
                <button type="button" class="gwt-Button gwt-Button-statButton" title="Laat populaire boeken zien"></button>
            </td>
            <td align="left" style="vertical-align: top;">
                <button type="button" class="gwt-Button gwt-Button-search" title="Zoek een boek"></button>
            </td>
            <td align="left" style="vertical-align: top;">
                <input type="text" class="gwt-TextBox gwt-TextBox-searchQuery">
            </td>
        </tr>
    </tbody>
</table>

我注意到萤火虫面板上也有此css标记（在gwt中编译时会自动添加此标记）。

element.style {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}

Answer 1

尝试为您的.dock添加固定高度，该高度与背景图片的高度相同，即

.dock { height: 100px }

Answer 2

将该网址放在引号中：

background: #e3e8f3 url("img/hborder.png") repeat-x 0px -1000px;

上次我检查格式是否正确。

编辑：啊，您的问题似乎是表出于某种奇怪的原因没有响应。 尝试这个。

background: url("img/hborder.png") repeat-x 0px -1000px;
background-color: #e3e8f3;