Chrome CSS 问题答案

【问题标题】：Chrome CSS IssueChrome CSS 问题
【发布时间】：2023-03-26 02:20:01
【问题描述】：

我有一个搜索框和按钮，几周前在所有浏览器（Chrome、FF、IE7/8/9、Opera）中都可以使用，但现在仅在 Chrome 中出现了错误的偏移。

在 Chrome 中

它在 Opera、FF、IE 中

请注意 Chrome 中的轻微偏移。这是此搜索框的 HTML，

<form id="function_search_form" method="post" class="span-24 textcenter last">
    <input type="text" name="basic_search_input" id="basic_search_input" />
    <input type="image" src="images/magnifying_glass.png" name="basic_search_button" id="basic_search_button" alt="Search Blueprints" />&nbsp;&nbsp;

    <a id="switch_adv_search" style="cursor: pointer; color: #1C94C4; font-size: 15px;">advanced</a>
    <input type="hidden" name="search_type" value="basic" />
    <div id="autocomplete_choices" class="autocomplete"></div>
</form>

这是这些元素的 CSS，

#function_search_form #basic_search_button {
    border: 1px solid #FFFFFF;
    border-radius: 0px 4px 4px 0px;
    background: #FFFFFF;
    vertical-align: middle;
    height: 25px;
    width: 27px;
    margin: 0.5em 0px;
    padding: 1px 0px;
}

#function_search_form #basic_search_input {
    border: 1px solid #FFFFFF;
    border-radius: 4px 0px 0px 4px;
    color: #050;
    font: bold 12px 'trebuchet ms', helvetica, sans-serif;
    width: 250px;
    height: 25px;
    padding-right: 5px;
    vertical-align: middle;
}

我尝试将输入包装在一个 div 中，并使用绝对位置或相对位置。但是，我更改的所有内容都在其他浏览器中破坏了它，但在 Chrome 中修复了它。似乎也是，如果我从文本输入中取出垂直对齐，可以在 Chrome 中修复它。

我不确定这是否是最新版本的 Chrome 中引入的新错误，但我记得它之前在 Chrome 中工作过，此后没有任何变化。

史蒂夫·坎贝尔的解决方案更新

我不确定你的工作情况如何，因为如果我取出除了我的 CSS 文件和这个 HTML 之外的所有内容，

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title></title>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
</head>

<body>
    <form id="function_search_form" method="post" class="span-24 textcenter last">
        <input type="text" name="basic_search_input" id="basic_search_input" />
        <input type="image" src="images/magnifying_glass.png" name="basic_search_button" id="basic_search_button" alt="Search Blueprints" />&nbsp;&nbsp;
        <a id="switch_adv_search" style="cursor: pointer; color: #1C94C4; font-size: 15px;">advanced</a>
        <input type="hidden" name="search_type" value="basic" />
        <div id="autocomplete_choices" class="autocomplete"></div>
    </form>
</body>
</html>

如下所示，

我唯一能想到的是 Fiddle 有一些不同的重置或其他东西。

【问题讨论】：

1px 的差异？你有一个 JSFiddle 或其他我们可以浏览的活生生的例子吗？
@RoddyoftheFrozenPeas 不抱歉。它在一个受私人密码保护的应用程序上。真的不能全部展示出来。你还在寻找什么？如果你愿意，我可以尝试提供更多的 CSS 和 HTML，但我不确定它会有多大帮助。
你规范化 CSS 了吗？不同的浏览器往往对某些属性有不同的默认值。重置它们通常是个好主意。
如果您无法为整个应用程序添加重置，那么查看一个流行的 css 重置（如 Eric Meyer's）并拉出部件可能不是一个坏主意表单并将其应用于这些元素的样式。
@Mat 我想问题是其他一些元素可能看起来不错，只是因为没有重置 CSS。修复其中一些可能会破坏其他部分。但还是值得一试。

标签： html css google-chrome

【解决方案1】：

这个fiddle 对我来说没问题。使用相对和绝对设置样式，并调整框大小以确保跨浏览器的一致性，并删除了 em 中的边距：

#function_search_form
{
    position: relative;
}
#function_search_form #basic_search_button {
    border: 1px solid #FFFFFF;
    border-radius: 0px 4px 4px 0px;
    background: #FFFFFF;
    height: 25px;
    width: 27px;
    margin: 0;
    padding: 1px 0px;
    box-sizing: content-box;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    position: absolute;
    top: 4px;
    left: 250px;
}

#function_search_form #basic_search_input {
    border: 1px solid #FFFFFF;
    border-radius: 4px 0px 0px 4px;
    color: #050;
    font: bold 12px 'trebuchet ms', helvetica, sans-serif;
    width: 250px;
    height: 25px;
    padding-right: 5px;
    box-sizing: content-box;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;    
    position: absolute;
    top: 4px;    
}

#function_search_form a {
    position: absolute;
    top: 8px;    
    left: 280px;
}

【讨论】：

我确实尝试过使用这些元素进行绝对定位，但每当我这样做时，它似乎在 Chrome、FF、IE9 中都可以工作，但在 IE7/8 中却无法使用。你的特定 CSS 对我来说都是一团糟。可能与 Fiddle 中的事物不同或我这边的事物不同有关。
我刚刚意识到我们实际上正在使用其中包含重置的蓝图。也许如果你将它添加到小提琴它可能会改变你所拥有的。