如何使我的输入在Firefox上与在Chrome上相同？

Question

我正在尝试让我的元素在Firefox的小屏幕上正确对齐（我正在使用Mac El Capitan）。我有这些元素

<div id="searchContainer">
<h1>Search For Race Results:</h1>
<form id="search-form" action="/races/search" accept-charset="UTF-8" method="get"><input name="utf8" value="✓" type="hidden">
<input name="first_name" id="first_name" value="Dave" placeholder="First Name" type="text">
<input name="last_name" id="last_name" value="" placeholder="Last Name" type="text">
<input name="event" id="event" value="" placeholder="Event" type="text">
<input alt="Search" src="http://www.racertracks.com/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2ef2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button" type="image">
</form></div>

我有这些样式用于对齐事物

#first_name,
#last_name {
  width: 40%;
  /*make the width like event so all the input fields looks good*/
} 

#event {  
  width: 100%;
}

#last_name,
#event {
  margin-left: 2px;
}

#event {
  margin-right: 2px;
} 

input.search_button {
  /* Search-button will be center when meda screen < 400px */
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

@media only screen and (max-width: 400px) {
  /*set the max width 400px so they will wrap after the media screen reach 400px*/
  #search-form {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  #first_name {
    width: calc(50% - 8px);
    margin: 0;
  }

  #last_name {
    width: calc(50% - 8px);
    margin-left: 2px;
  }

  #first_name,
  #last_name {
    margin-bottom: 1px;
  }

  #event {
    width: calc(100% - 35px);
    margin-right: 2px;
  }
}

但请注意，当我在Firefox上将屏幕压缩到小于400像素的大小时，这些元素不会像在Chrome上那样很好地包装，这就是我想要的 - https://jsfiddle.net/7z662891/2/。我需要做些什么才能使Firefox的行为与Chrome一样？

Answer 1

我在这里看到了几个问题。

复位

首先，您必须注意，默认情况下，每个浏览器都会以不同方式显示各种元素。所以你的第一步是添加重置。你可以试试像

这样的东西

Meyerweb
Normalize
Super Form Reset.css

表单样式

为要保持一致的内容添加特定样式。否则你将获得默认值。

数学

尽量不要混用px和%。例如，您使用了

#last_name {
    width: calc(50% - 8px);
    margin-left: 2px;
}

而是尝试

#last_name {
    width: 48%;
    margin-left: 1%;
}

因为当您将它们并排放置时，所有内容都需要添加或低于100％。

另请注意，许多旧版浏览器不支持calc。您可以在https://developer.mozilla.org/en-US/docs/Web/CSS/calc

了解更多信息

Answer 2

如果您将输入放在没有空格的行中，则会将默认边距重置为0.

<input name="first_name" id="first_name" value="Dave" placeholder="First Name" type="text"><input name="last_name" id="last_name" value="" placeholder="Last Name" type="text"><input name="event" id="event" value="" placeholder="Event" type="text"><input alt="Search" src="http://www.racertracks.com/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2ef2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button" type="image">

我重写了CSS不使用flex-box，因为有时使用它们会出现问题。同时使box-sizing: border-box;包含#searchContainer内的所有内容，因此所有宽度都将基于包含边框的框而不仅仅是内容宽度，当有边框时，宽度会增加，或者填充，并将输入文本类型设置为4px填充，以便文本可以在所有方面呼吸。

添加了媒体查询，以使输入在600px或更窄时排到下一行。

这是你在找什么？

JSFiddle示例： https://jsfiddle.net/xbpsx6ur/8/

Answer 3

使用Firefox时，表单似乎不像Chrome那样包含输入元素。 Firefox允许表单的内部元素在包装之前溢出表单的边界，因为浏览器宽度减小了。

我建议在表单内部使用div，然后使用该div来包含输入元素。可能还需要一些CSS更新，但这可能有助于Firefox的行为更像Chrome的HTML。

Answer 4

不要在css中使用calc值，因为它不支持所有浏览器。     尝试使用宽度作为百分比值。

Example:
  #first_name {
    width:35%;
    margin: 0;
  }