浏览器之间不一致的问题，困扰我很久

发布于 2024-08-17 19:48:57 字数 1364 浏览 4 评论 0原文

首先，截图

正如您看，虽然我明确描述了高度、填充顶部等，但浏览器之间总是有一点差异，我怎样才能使它们相同呢？这个问题一直困扰着我，我从来没有找到原因，我什至尝试删除我使用的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

原文

First, the screenshots

As you see, although i explicitly described the height, padding-top, etc, there's always a little differece between browsers, how can i make them the same? This problem keep puzzling me and i never find the cause, i even tried delete reset.css i use but still no luck

Paste related DOM and CSS for reference

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;
}

Add the view in Firebug

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

笑忘罢 2024-08-24 19:48:57

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

回复收藏 0 原文

独夜无伴 2024-08-24 19:48:57

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

回复收藏 0 原文

白芷 2024-08-24 19:48:57

由于您尚未指定 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 位置。

Since you have not specified the rest of your CSS I could only test it with default settings in Chrome, Internet Explorer 8, and Mozilla Firefox, but this should look exactly the same across browsers making use of 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;
}

Apply your preferred styling and be sure to change top and left positions accordingly.

回复收藏 0 原文