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中的外观（它应该如下所示）Screenshot

这就是它在其他浏览器中的外观，例如chrome：Screenshot

任何想法如何纠正这个？提前谢谢。

[编辑：

这是由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>

我注意到firebug面板也有这个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;

除Firefox外的所有浏览器中的背景均已破

2 个答案: