1

一、截图

浏览器问题

如您所见，尽管我明确描述了高度、顶部填充等，但浏览器之间总是存在一些差异，我怎样才能使它们相同？这个问题一直困扰着我，我从来没有找到原因，我什至尝试删除我使用的 reset.css 但仍然没有运气

粘贴相关的 DOM 和 CSS 以供参考

DOM：

<div id="menu">
        ...
        <form id="topsearch">
            <button name="submit" type="submit" tabindex="2"></button>
            <input id="s" name="s" type="text" value="SEARCH..." tabindex="1" />
        </form>
</d

CSS：

#topsearch {
    height:31px;width:205px;
    padding:8px 0 4px;
    background-color:#202020;
    float:right;
}

#topsearch #s {
    height: 17px;
    padding: 5px;
    vertical-align: middle;
}

#topsearch button {
    width: 26px;
    height: 26px;
    border: none;
}

在 Firebug 中添加视图

查看infirebug

4

4 回答 4

0

尝试设置margin: 0所有元素，看看您是否仍然有同样的问题。浏览器通常会将自己的边距/填充应用于不同的元素。

于 2010-01-09T16:22:41.920 回答
0

你有几种可能性：

  • JavaScript：您可以使用 JavaScript 设置不同的值，具体取决于浏览器，如下所示：http ://rafael.adm.br/css_browser_selector/
  • 条件 HTML：使用特殊<!--[if IE]>标签至少可以解决 Internet Explorer 的问题。
  • 服务器端样式表切换：使用您的服务器端语言检测用户浏览器并相应地包含样式表。
于 2010-01-09T16:51:06.590 回答
0

我自己找到了一个解决方案，很简单，只需让按钮向左浮动，现在所有浏览器的外观都保持不变。

于 2010-01-09T16:59:41.100 回答
0

由于您没有指定其余的 CSS，我只能在 Chrome、Internet Explorer 8 和 Mozilla Firefox 中使用默认设置对其进行测试，但这在使用以下内容的浏览器中应该看起来完全相同position: absolute：

#topsearch {
    height: 43px;
    width: 205px;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    background-color:#202020;
    position: relative;
    float: right;
}

#topsearch #s {
    height: 17px;
    width: 155px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 0px;
    padding-bottom: 0px;
    position: absolute;
    top: 12px;
    left: 30px;
    border: 0;
}

#topsearch button {
    width: 26px;
    height: 26px;
    border: none;
    position: absolute;
    top: 10px;
}

应用您喜欢的样式，并确保相应地更改top和left定位。

于 2010-01-12T01:47:50.470 回答