html - 为什么我的图像在 Firefox 中变形(缩小)？

Question

此问题发生在 Firefox 上。在 Chrome 上一切正常。

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

但是，在 Firefox 上图像被扭曲(缩小)，我不明白为什么。

这是 fiddle — 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 容器的初始设置是 flex-shrink: 1 ( source )。

这意味着，默认情况下，允许 flex 元素缩小到其初始大小以下以适合容器。

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

将此添加到您的代码中:

.search_button { flex-shrink: 0; }

revised fiddle

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

---

更新

正如 @Oriol 指出的那样在 an answer ， flex 容器的另一个初始设置是 flex 元素的 min-width: auto。这意味着 flex 元素不能小于其内容的大小。

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

更多细节在这里:

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