摆脱网页上不需要的布局元素答案

【问题标题】：Getting rid of undesired layout element on webpage摆脱网页上不需要的布局元素
【发布时间】：2011-05-01 15:20:56
【问题描述】：

这是什么？

我该如何摆脱它？ Actual webpage here.

【问题讨论】：

截图来自哪个浏览器？因为我没看到。
我在 OS X 上的 Chrome 11 中看到它。

标签： html css layout cross-browser stylesheet

【解决方案1】：

从 .singleinfo css 类中删除 min-width: 640px

【讨论】：

【解决方案2】：

singleinfo 类的最小宽度设置为640px，而背景图像只有 630 像素宽。您可以在后台设置不重复或将min-width更改为630px。

【讨论】：

【解决方案3】：

这是div.singleinfo重复的背景。要摆脱它，请将no-repeat 添加到background 属性，因此它变为：

background: #F7F7F7 url(images/macmet.jpg) bottom left no-repeat;

【讨论】：

【解决方案4】：

除了默认为重复背景外，您还设置了与页面其余部分不一致的背景颜色。

.singleinfo { background: #F4F4F4 url(images/macmet.jpg) bottom left no-repeat; }

在 Windows 上的 Chrome 11 中正确显示。

【讨论】：

【解决方案5】：

更改您的 style.css 以获得此：

.singleinfo {
    background: url("images/macmet.jpg") no-repeat scroll left bottom #F4F4F4;
    font: 12px Georgia,Arial,century gothic,verdana,sans-serif;
    margin: 0;
    max-height: 20px;
    min-width: 640px;
    padding: 5px 0 15px;
}

此修复程序已经过测试并且可以正常工作：

Mozilla Firefox 4.0.1
Internet Explorer 9.0.8112.16421
Opera 11.10.2092
谷歌浏览器 11.0.696.60

【讨论】：

【解决方案6】：

将您的班级.singleinfo 的background 属性更改为>

background: url("images/macmet.jpg") no-repeat scroll left bottom #F7F7F7

【讨论】：