为什么我的图像在 Firefox 中变形（缩小）？

Question

这个问题出现在 Firefox 上。在 Chrome 上一切都很好。

我的搜索字段旁边有一个放大镜图像。

但是，在 Firefox 上，图像被扭曲（缩小），我不知道为什么。

这是小提琴 - https://jsfiddle.net/k01jLb28/3/。

以下是我应用于搜索字段的样式：

*/@media screen and (max-width: 500px) {
  /* line 19, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */
  body {
    margin: 0px;
  }
  /* line 23, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */
  #container {
    border-radius: 0px;
    background: #ffffff;
    padding: 2px;
    width: 100%;
  }
}
/* line 31, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

ul.nav {
  font-family: 'russo_oneregular';
  letter-spacing: 1px;
}
/* line 35, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

ul.nav li.ui-state-active,
ul.nav li.ui-tabs-selected {
  font-weight: bold;
  color: #000000;
}
/* line 40, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

ul.nav li.ui-tabs-active a,
ul.nav li.ui-tabs-selected a {
  background-color: silver;
  color: #ffffff;
}
/* line 46, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

.ui-tabs-panel {
  height: 0px;
}
/* line 50, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

#add_form {
  display: none;
  box-shadow: inset 0 0 10px #000000;
  padding: 20px;
  background-color: #f0f0f0;
}
/* line 59, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

#headerText {
  font-family: 'russo_oneregular';
  font-weight: bold;
  font-size: 24px;
  text-align: center;
}
/* line 66, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

.tab {
  font-family: 'russo_oneregular';
}
/* line 70, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

.field {
  font-family: Arial;
  font-size: 11px;
  padding: 5px;
}
/* line 76, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

.required {
  color: red;
}
/* line 80, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

.errorMsg {
  color: red;
}
/* line 84, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

#modalCloseButton {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}
/* line 91, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

.modal_button {
  border: 1px solid #a8c1d5;
  border-radius: 8px;
  font-size: 14px;
  font-family: arial, helvetica, sans-serif;
  padding: 10px 10px 10px 10px;
  text-decoration: none;
  display: inline-block;
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
  font-weight: bold;
  color: #FFFFFF;
  background-color: #CEDCE7;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#CEDCE7), to(#596a72));
  background-image: -webkit-linear-gradient(top, #CEDCE7, #596a72);
  background-image: linear-gradient(to bottom, #CEDCE7, #596a72);
  filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#CEDCE7, endColorstr=#596a72);
}
.modal_button:hover {
  border: 1px solid #8aabc5;
  background-color: #acc4d6;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#acc4d6), to(#434f55));
  background-image: -webkit-linear-gradient(top, #acc4d6, #434f55);
  background-image: linear-gradient(to bottom, #acc4d6, #434f55);
  filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#acc4d6, endColorstr=#434f55);
}
/* line 113, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

.modal a.close-modal {
  display: none;
}
/* line 117, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

.noRaceData {
  font-family: Verdana;
}
/* line 122, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

#searchContainer {
  padding: 10px;
  font-family: "Calibre", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
  background-color: tan;
  max-width: 1000px;
  width: 100%;
  display: inline-block;
  -webkit-box-flex: 1;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  box-sizing: border-box;
}
/* line 132, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

#searchContainer h1 {
  margin: 5px 0;
  font-size: 1.0em;
}
/* line 137, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

#search-form {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  /*In screen >400px input element will be inline*/
  width: 100%;
}
/* line 143, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

#first_name,
#last_name {
  width: 40%;
  /*make the width like event so all the input fields looks good*/
}
/* line 149, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

#event {
  width: 100%;
}
#last_name,
#event {
  margin-left: 2px;
}
/* line 158, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

#event {
  margin-right: 2px;
}
@media only screen and (max-width: 400px) {
  /*set the max width 400px so they will wrap after the media screen reach 400px*/
  /* line 164, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */
  #search-form {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  /* line 168, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */
  #first_name {
    width: calc(50% - 8px);
    margin: 0;
  }
  /* line 172, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */
  #last_name {
    width: calc(50% - 8px);
    margin-left: 2px;
  }
  /* line 176, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */
  #first_name,
  #last_name {
    margin-bottom: 1px;
  }
  /* line 152, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */
  /* line 181, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */
  #event {
    width: calc(100% - 35px);
    margin-right: 2px;
  }
  /* line 185, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */
  input.search_button {
    /* Search-button will be center when meda screen < 400px */
  }
}
/* line 192, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

#search_form {
  display: table-cell;
  padding: 0px;
}
/* line 196, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

#search_form form input {
  vertical-align: middle;
}
#searchResultsContainer {
  font-family: "Calibre", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
  padding: 5px 0px 5px 0px;
  width: 100%;
}
/* line 206, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

#searchResults {
  width: 100%;
  text-align: left;
}
/* line 211, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

.eventNameSearchResult {
  text-decoration: none;
}
@media screen and (max-width: 400px) {
  /* line 216, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */
  .saveHeader {
    display: none;
  }
  /* line 219, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */
  #searchResults th:nth-of-type(3) {
    display: none;
  }
  /* line 222, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */
  #searchResults th:nth-of-type(6) {
    display: none;
  }
  /* line 225, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */
  #searchResults td:nth-of-type(3) {
    display: none;
  }
  /* line 228, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */
  #searchResults td:nth-of-type(6) {
    display: none;
  }
}
@media screen and (min-width: 401px) {
  /* line 234, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */
  #searchResults th:nth-of-type(2) {
    display: none;
  }
  /* line 237, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */
  #searchResults td:nth-of-type(2) {
    display: none;
  }
}
/* line 242, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

#searchResults thead tr {
  background-color: #000000;
  color: #ffffff;
}

<div id="searchContainer">
  <h1>Search For Events:</h1>
  <form id="search-form" action="/races/search" accept-charset="UTF-8" method="get">
    <input name="utf8" type="hidden" value="✓">

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

Answer 1

弹性容器的初始设置是flex-shrink: 1 (source)。

这意味着，默认情况下，允许弹性项目缩小到其初始大小以下以适应容器。

要让您的布局在 Firefox 中正常工作，您需要在图像上禁用 flex-shrink。

将此添加到您的代码中：

.search_button { flex-shrink: 0; }

revised fiddle

至于为什么在 Firefox 而不是 Chrome 中需要这个，我想说 flex 布局相对较新 (CSS3) 并且不同的浏览器对规范语言有不同的实现和解释。

---

更新

正如@Oriol 在an answer 中所指出的，弹性容器的另一个初始设置是弹性项目上的min-width: auto。这意味着弹性项目不能小于其内容的大小。

Chrome 已经实现了这个规范指令。 Firefox 似乎没有（至少在替换元素方面？），并且 flex 项正在缩小到图像的固有大小以下。

更多细节在这里：

• Why doesn't flex item shrink past content size?

Answer 2

区别在于Implied Minimum Size of Flex Items。

输入毕竟是被替换的元素，因此它们在不同的浏览器中可能表现不同。

在这种情况下，输入中的图像似乎决定了它在 Chrome 中的隐含最小尺寸，但在 Firefox 中却没有。

如果你在 Chrome 中使用 min-width: 0，它的行为会像 Firefox。

您可能应该使用 flex-grow 来指定增长比率，而不是像 width: 100% 这样的东西然后让弹性项目收缩。