为什么我的图像在Firefox中被扭曲（缩小）？ [英] Why is my image being distorted (shrunk) in Firefox?
本文介绍了为什么我的图像在Firefox中被扭曲（缩小）？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的搜索字段旁边有一个放大镜图片。然而，在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;背景：#ffffff; padding：2px;宽度：100％; }} / * line 31，/Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss * / ul.nav {font-family：'russo_oneregular'; letter-spacing：1px;} / *第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;} / *第40行，/Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss * / ul.nav li.ui-tabs-active a，ul.nav li.ui-tabs选中了一个{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; / color =＃; / /第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';} / *第70行，/Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss * /。field {font-family：Arial; font-size：11px; / *第76行/Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss * /。required {color：red;} / *第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;顶部：10px;正确：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-shadow：-1px -1px 0 rgba（0，0，0，0.3）; font-weight：bold;颜色：#FFFFFF; background-color：＃CEDCE7; background-image：-webkit-gradient（线性，左上角，左下角，从（＃CEDCE7）到（＃596a72））; background-image：-webkit-linear-gradient（top，＃CEDCE7，＃596a72）; background-image：线性渐变（到底部，＃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（线性，左上，左下，从（＃acc4d6）到（＃434f55））; background-image：-webkit-linear-gradient（top，＃acc4d6，＃434f55）; background-image：线性渐变（至底部，＃acc4d6，＃434f55）; filter：progid：DXImageTransform.Microsoft.gradient（GradientType = 0，startColorstr =＃acc4d6，endColorstr =＃434f55）;} / *第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;背景颜色：棕褐色; max-width：1000px;宽度：100％;显示：内联块; -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 ;显示：-ms-inline-flexbox;显示：inline-flex; / *在屏幕> 400px输入元素将内联* /宽度：100％;} / *第143行，/Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss * /＃ first_name，＃last_name {width：40％; / *使宽度像事件，所以所有的输入字段看起来不错* /} / *第149行，/Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss * /＃事件{宽度：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）{/ *设置最大宽度为400px，这样它们将在媒体屏幕达到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）;保证金：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; } / *第152行，/Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss * / / *第181行，/ Users / davea / Documents / workspace / runtrax / app / assets / stylesheets / events.css.scss * / #event {width：calc（100％ - 35px）; margin-right：2px; } / *第185行，/Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss * / input.search_button {/ *搜索按钮将位于媒体屏幕< 400px * /}} / * line 192，/Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss * /＃search_form {display：table-cell;填充：0px;} / *第196行，/Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss * /＃search_form表单输入{vertical-align：middle;}＃searchResultsContainer {font - 家族：Calibre，Helvetica Neue，Helvetica，Roboto，Arial，无衬线; 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; / *第219行，/Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss * / #searchResults th：nth-of-type（3）{display：none; （6）{display：none;} / * line 222，/Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss * / #searchResults th：nth-of-type } / *第225行，/Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss * / #searchResults td：nth-of-type（3）{display：none; / *第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; / *第237行，/Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss * / #searchResults td：nth-of-type（2）{display：none; /}第242行/Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss * /＃searchResults thead tr {background-color：＃000000;颜色：#ffffff;}
< div id = searchContainer> < h1>搜索活动：< / h1> < form id =search-formaction =/ races / searchaccept-charset =UTF-8method =get> < input name =utf8type =hiddenvalue =✓> < input type =textname =first_nameid =first_namevalue =Daveplaceholder =First Name> < input type =textname =last_nameid =last_namevalue =placeholder =Last Name> < input type =textname =eventid =eventvalue =placeholder =Event> < input alt =Searchtype =imagesrc =http://www.racertracks.com/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2ef2a4e15b335cd42e64563ba65e4f22e4.pngclass =search_button> < / form>< / div>
解决方案Flex容器的初始设置是
$ b 这意味着，默认情况下， flex项目被允许缩小到低于其初始大小，以适应在容器内。
flex-shrink：1 （ source ）。$ b 这意味着，默认情况下， flex项目被允许缩小到低于其初始大小，以适应在容器内。
为了使您的布局在Firefox中工作，您需要禁用 flex-shrink 在图像上。
将此添加到您的代码中：
.search_button {flex-缩小：0; }
UPDATE
正如 @Oriol 在答案，Flex容器的另一个初始设置为 min-width：auto 。这意味着一个弹性项目不能小于其内容的大小。
Chrome已经实现了这个spec说明。看起来Firefox并没有（至少在替换的元素方面呢？），flex项目在图像的固有尺寸以下收缩。
更多详情：
This problem occurs on Firefox. On Chrome all is well.
I have a magnifying glass image next to my search fields.
However, on Firefox the image is being distorted (shrunk) and I can’t figure out why.
Here’s the Fiddle — https://jsfiddle.net/k01jLb28/3/.
Here are the styles I’m applying to my search fields:
*/@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>
解决方案
An initial setting of a flex container is flex-shrink: 1 (source).
This means that, by default, flex items are allowed to shrink below their initial size in order to fit inside the container.
For your layout to work in Firefox you need to disable flex-shrink on the image.
Add this to your code:
.search_button { flex-shrink: 0; }
As to why this is needed in Firefox but not Chrome, I would say that flex layout is relatively new (CSS3) and different browsers have different implementations and interpretations of spec language.
UPDATE
As pointed out by @Oriol in an answer, another initial setting of a flex container is min-width: auto on flex items. This means that a flex item cannot be smaller than the size of its content.
Chrome has implemented this spec instruction. It appears that Firefox has not (at least in terms of replaced elements?), and the flex item is shrinking below the inherent size of the image.
More details here:
这篇关于为什么我的图像在Firefox中被扭曲（缩小）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
