我遇到svg的问题，它的高度不影响父容器，导致其他元素的一些奇怪的位置。
这是Fiddle。如果你在ie11中打开它，你可以看到圆圈现在延伸到灰色框之外，而不是像灰色框那样使灰色框变大。
我已经尝试将其添加到svg，正如另一个问题所建议的那样：preserveAspectRatio="xMinYMin slice"但它没有任何区别。
我也尝试过以不同的方式设置宽度和高度，但仍然没有任何效果。
* {
box-sizing: border-box;
}
body {
background: #fff;
}
.row--flex {
background: #dedede;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
.col--6-12 {
width: 50%;
}
.selector-block {
padding-right: 45px;
padding-left: 45px;
}
.selector-block .col--flex-col {
justify-content: center;
}
.selector-block .col--flex-col > * {
flex: 0;
}
.selector-block .col--6-12:first-of-type {
padding-right: 45px;
}
.selector-block .col--6-12:last-of-type {
padding-left: 45px;
}
.selector-block__icons {
position: relative;
max-width: 575px;
margin: 0 auto;
text-align: center;
}
.selector-block__title {
position: absolute;
pointer-events: none;
transform: translateX(-50%);
}
.selector-block__title--join {
top: 30%;
left: 33%;
}
.selector-block__title--learn {
top: 56%;
left: 72%;
}
.selector-block__title--connect {
top: 76%;
left: 28%;
}
.selector-block__title.open {
color: #fff;
}
.selector-block__text {
display: none;
}
.selector-block__text--mia {
display: block;
}
.selector-icons {
max-width: 575px;
width: 100%;
}
.selector-icon {
display: block;
cursor: pointer;
}
.selector-icon--connect .selector-icon__img {
fill: #e0b83b;
}
.selector-icon--learn .selector-icon__img {
fill: #51bab4;
}
.selector-icon--join .selector-icon__img {
fill: #6e5bb2;
}
.selector-icon--selected .selector-circle {
opacity: 1;
}
.selector-icon--selected .selector-icon__img {
fill: #fff;
}
.selector-circle {
opacity: 0.3;
transition: all 400ms;
}
.selector-circle--connect {
bottom: 0;
right: 48%;
}
.selector-circle--connect .selector-circle__img {
fill: #e0b83b;
}
.selector-circle--learn {
top: 50%;
left: 48%;
transform: translateY(-50%);
}
.selector-circle--learn .selector-circle__img {
fill: #51bab4;
}
.selector-circle--join {
top: 0;
right: 48%;
}
.selector-circle--join .selector-circle__img {
fill: #6e5bb2;
}<div class="row row--contained row--flex p--b-100 selector-block bg--white">
<div class="col--6-12 col__m--12-12">
<div class="selector-block__icons">
<svg version="1.1" class="selector-icons" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="100%" height="100%" viewBox="0 0 572.17188 595.41016" preserveAspectRatio="xMinYMin slice">
<a class="selector-icon selector-icon--join">
<g class="selector-circle">
<g>
<defs>
<rect id="SVGID_1_" x="27.46826" width="323.42432" height="323.41992"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" overflow="visible"/>
</clipPath>
<path clip-path="url(#SVGID_2_)" fill="#6F5CA8" d="M350.89453,161.71094c0,89.31152-72.40088,161.71289-161.71338,161.71289
c-89.31201,0-161.71387-72.40137-161.71387-161.71289c0-89.3125,72.40186-161.71289,161.71387-161.71289
C278.49365-0.00195,350.89453,72.39844,350.89453,161.71094"/>
</g>
</g>
<path class="selector-icon__img" fill-rule="evenodd" clip-rule="evenodd" d="M203.63818,99.52637c-0.82422,0-1.49414-0.6709-1.49414-1.49219
c0-0.82324,0.66992-1.49316,1.49414-1.49316h28.03516c1.46191,0,2.80273,0.5957,3.77734,1.57129h0.01563
c0.95898,0.97363,1.56738,2.32617,1.56738,3.78809v58.00977c0,1.47754-0.59277,2.81836-1.56738,3.79395l-0.10547,0.08887
c-0.96289,0.91602-2.25781,1.47754-3.6875,1.47754H146.5874c-1.46191,0-2.81836-0.59277-3.77734-1.56641
c-0.97461-0.97559-1.58203-2.31641-1.58203-3.79395v-58.00977c0-1.47656,0.60742-2.81445,1.56641-3.78809h0.01563h-0.01563
c0.97461-0.97559,2.33105-1.58789,3.79297-1.58789h28.03613c0.83789,0,1.50879,0.67188,1.50879,1.50977
c0,0.82129-0.6709,1.49219-1.50879,1.49219H146.5874c-0.63867,0-1.23242,0.27344-1.67578,0.70215
c-0.42578,0.4248-0.68164,1.01758-0.68164,1.67188v58.00977c0,0.63867,0.25586,1.25195,0.68164,1.67578
c0.44336,0.4248,1.03711,0.70215,1.67578,0.70215h85.08594c0.62305,0,1.18945-0.26172,1.61328-0.65527l0.0625-0.04688
c0.42578-0.42383,0.70215-1.02148,0.70215-1.67578v-58.00977c0-0.6543-0.27637-1.24707-0.70215-1.67188
c-0.44043-0.42871-1.03711-0.70215-1.67578-0.70215H203.63818z"/>
<path class="selector-icon__img" fill-rule="evenodd" clip-rule="evenodd" d="M187.20459,149.7959c-0.83789,0-1.50977-0.66602-1.50977-1.48828
c0-0.82324,0.67188-1.49316,1.50977-1.49316h23.19336c0.83789,0,1.50781,0.66992,1.50781,1.49316
c0,0.82227-0.66992,1.48828-1.50781,1.48828H187.20459z"/>
<path class="selector-icon__img" fill-rule="evenodd" clip-rule="evenodd" d="M187.20459,142.07715c-0.83789,0-1.50977-0.6709-1.50977-1.50879
c0-0.82227,0.67188-1.49316,1.50977-1.49316h36.73438c0.83789,0,1.50781,0.6709,1.50781,1.49316
c0,0.83789-0.66992,1.50879-1.50781,1.50879H187.20459z"/>
<path class="selector-icon__img" fill-rule="evenodd" clip-rule="evenodd" d="M187.20459,134.3418c-0.83789,0-1.50977-0.6709-1.50977-1.50879
c0-0.82227,0.67188-1.49316,1.50977-1.49316h36.73438c0.83789,0,1.50781,0.6709,1.50781,1.49316
c0,0.83789-0.66992,1.50879-1.50781,1.50879H187.20459z"/>
<path class="selector-icon__img" fill-rule="evenodd" clip-rule="evenodd" d="M187.20459,126.60352c-0.83789,0-1.50977-0.6709-1.50977-1.50488
c0-0.82227,0.67188-1.49316,1.50977-1.49316h36.73438c0.83789,0,1.50781,0.6709,1.50781,1.49316
c0,0.83398-0.66992,1.50488-1.50781,1.50488H187.20459z"/>
<path class="selector-icon__img" fill-rule="evenodd" clip-rule="evenodd" d="M166.50732,123.60547c2.54492,0,4.8457,1.03223,6.51855,2.70898
h0.01465c1.67578,1.67676,2.69824,3.98926,2.69824,6.51855c0,2.54199-1.03711,4.8584-2.69824,6.53418h-0.01465
c-1.66211,1.67285-3.97363,2.70996-6.51855,2.70996c-2.54297,0-4.8584-1.03711-6.51953-2.70996h-0.01172
c-1.66016-1.67578-2.69824-3.99219-2.69824-6.53418s1.03809-4.8418,2.69824-6.51855h0.01172
C161.66455,124.6377,163.96436,123.60547,166.50732,123.60547 M170.92334,128.41602
c-1.12695-1.12695-2.69336-1.8125-4.41602-1.8125c-1.7207,0-3.27148,0.70215-4.40234,1.8125l-0.01172,0.0166
c-1.13086,1.12598-1.81348,2.67773-1.81348,4.40039c0,1.71875,0.68262,3.29102,1.81348,4.41699h0.01172
c1.13086,1.12695,2.68164,1.8252,4.40234,1.8252c1.72266,0,3.28906-0.69824,4.41602-1.8252
c1.12695-1.12598,1.8291-2.69824,1.8291-4.41699c0-1.72266-0.70215-3.29004-1.8291-4.40039V128.41602z"/>
<path class="selector-icon__img" fill-rule="evenodd" clip-rule="evenodd" d="M158.771,149.79688c-0.82227,0-1.49219-0.66699-1.49219-1.48926
c0-0.82324,0.66992-1.49316,1.49219-1.49316h15.47461c0.82227,0,1.49219,0.66992,1.49219,1.49316
c0,0.82227-0.66992,1.48926-1.49219,1.48926H158.771z"/>
<path class="selector-icon__img" fill-rule="evenodd" clip-rule="evenodd" d="M203.63818,107.26172c-0.82422,0-1.49414-0.6709-1.49414-1.49316
c0-0.81836,0.66992-1.48926,1.49414-1.48926h7.73438c0.82227,0,1.49414,0.6709,1.49414,1.48926v7.73926
c0,0.82227-0.67188,1.49316-1.49414,1.49316h-44.46875c-0.83789,0-1.50781-0.6709-1.50781-1.49316v-7.73926
c0-0.83496,0.66992-1.50488,1.50781-1.50488h7.71973c0.82324,0,1.50879,0.66992,1.50879,1.50488
c0,0.82227-0.68555,1.49316-1.50879,1.49316h-6.22559v4.7373h41.48145v-4.7373H203.63818z"/>
<path class="selector-icon__img" fill-rule="evenodd" clip-rule="evenodd" d="M182.36279,69.46387h13.53613
c0.82227,0,1.49316,0.66992,1.49316,1.49316v34.8125c0,0.82129-0.6709,1.49219-1.49316,1.49219h-13.53613
c-0.82227,0-1.49414-0.6709-1.49414-1.49219v-34.8125C180.86865,70.13379,181.54053,69.46387,182.36279,69.46387
M194.40967,72.46582h-10.53906v31.79785h10.53906V72.46582z"/>
<path class="selector-icon__img" fill-rule="evenodd" clip-rule="evenodd" d="M191.65283,78.69238c0,1.3877-1.12695,2.51465-2.51465,2.51465
c-1.38477,0-2.50977-1.12695-2.50977-2.51465c0-1.38379,1.125-2.51074,2.50977-2.51074
C190.52588,76.18164,191.65283,77.30859,191.65283,78.69238"/>
</a>
<a class="selector-icon selector-icon--learn">
<g class="selector-circle">
<g>
<defs>
<rect id="SVGID_3_" x="248.74756" y="159.10059" width="323.42432" height="323.41992"/>
</defs>
<clipPath id="SVGID_4_">
<use xlink:href="#SVGID_3_" overflow="visible"/>
</clipPath>
<path clip-path="url(#SVGID_4_)" fill="#52BBB5" d="M572.17383,320.80957c0,89.31152-72.40039,161.71289-161.71289,161.71289
s-161.71338-72.40137-161.71338-161.71289c0-89.3125,72.40088-161.71289,161.71338-161.71289
S572.17383,231.49707,572.17383,320.80957"/>
</g>
</g>
<path class="selector-icon__img" d="M452.68945,268.54102l-40.10156-14.75c-4.37891-1.61328-9.2168-1.61328-13.5957,0l-37.56641,14.52051
c-3.22656,1.15137-5.07031,4.14746-5.07031,7.375c0,3.22559,2.07422,5.99121,5.07031,7.14355l40.10156,14.75
c2.07422,0.69141,4.37891,1.15234,6.68164,1.15234c2.30664,0,4.60938-0.46094,6.45313-1.38379l9.21875-3.45703
c1.15234-0.46094,1.8457-1.84277,1.38477-2.99512s-1.8457-1.84375-2.99609-1.38379l-9.2207,3.45801
c-2.99414,1.15234-6.45117,1.15234-9.9082,0l-40.10156-14.51953c-1.84375-0.69141-2.07422-2.30371-2.07422-2.76465
s0.23047-2.30566,2.07422-2.99609l37.56641-14.29004c3.22656-1.15234,6.91406-1.38184,10.37109,0l40.09961,14.75
c1.38281,0.23047,2.07422,1.15234,2.07422,2.53613c0,1.38184-0.92188,2.53418-2.30469,2.99414l-16.13281,6.22363l-24.42969-9.91016
c-0.69141-0.92188-2.30273-1.61328-4.37695-1.61328c-2.53516,0-4.60938,1.15234-4.60938,2.30566
c0,1.15137,1.84375,2.07324,4.14844,2.30371l26.96289,10.83203v28.57813c-2.76367,0.92188-4.60938,3.45703-4.60938,6.45313
c0,3.91797,2.99609,6.91309,6.91406,6.91309s6.91406-2.99512,6.91406-6.91309c0-2.53516-1.38281-4.84082-3.68555-5.99219
c1.8418-1.15332,3.68555-2.53516,5.07031-3.68848c0.46094-0.46094,0.68945-1.15137,0.68945-1.6123v-18.4375
c0-1.38281-0.92188-2.30469-2.30273-2.30469c-1.38281,0-2.30664,0.92188-2.30664,2.30469v17.28516
c-0.68945,0.69043-1.38281,1.15234-2.30469,1.61328v-23.96875l15.44141-5.76172c3.22656-1.15332,5.30078-4.14941,5.30078-7.375
C457.75977,272.45898,455.68555,269.69336,452.68945,268.54102 M434.71289,326.3877c-1.38281,0-2.30469-0.92188-2.30469-2.30469
s0.92188-2.30371,2.30469-2.30371c1.38477,0,2.30664,0.9209,2.30664,2.30371S436.09766,326.3877,434.71289,326.3877"/>
<path class="selector-icon__img" d="M420.42383,320.16504c-4.60742,1.15234-9.21875,1.61328-13.36523,1.61328
c-11.52344,0-25.12109-4.37891-32.26563-10.37109v-17.28418c0-1.38281-0.92188-2.30469-2.30469-2.30469
s-2.30469,0.92188-2.30469,2.30469v18.4375c0,0.69043,0.23047,1.38281,0.69141,1.61328
c8.98828,8.06543,24.89063,12.21484,36.18359,12.21484c4.37891,0,9.44727-0.69238,14.28906-1.84473
c1.15039-0.23047,2.07227-1.6123,1.61133-2.76563C422.73047,320.62598,421.57617,319.7041,420.42383,320.16504"/>
</a>
<a class="selector-icon selector-icon--connect">
<g class="selector-circle">
<g>
<defs>
<rect id="SVGID_5_" y="271.98047" width="323.42188" height="323.42969"/>
</defs>
<clipPath id="SVGID_6_">
<use xlink:href="#SVGID_5_" overflow="visible"/>
</clipPath>
<path clip-path="url(#SVGID_6_)" fill="#E0B83B" d="M323.42578,433.69727c0,89.3125-72.40088,161.71289-161.71338,161.71289
C72.40088,595.41016,0,523.00977,0,433.69727c0-89.31152,72.40088-161.71289,161.7124-161.71289
C251.0249,271.98438,323.42578,344.38574,323.42578,433.69727"/>
</g>
</g>
<path class="selector-icon__img" d="M192.06689,374.06055h-12.22168v-5.07422c0-1.14648-0.93359-2.0791-2.0791-2.0791
c-1.14746,0-2.08008,0.93262-2.08008,2.0791v5.07422h-25.55176v-5.07422c0-1.14648-0.93359-2.0791-2.08008-2.0791
s-2.08008,0.93262-2.08008,2.0791v5.07422h-12.2207c-3.88086,0-7.03711,3.15527-7.03711,7.03418v57.76563
c0,3.87988,3.15625,7.03613,7.03711,7.03613h58.31348c3.87988,0,7.03613-3.15625,7.03613-7.03613v-57.76563
C199.10303,377.21582,195.94678,374.06055,192.06689,374.06055 M130.87451,392.52441h64.06934v46.33594
c0,1.58594-1.29004,2.87695-2.87695,2.87695h-58.31348c-1.58789,0-2.87891-1.29102-2.87891-2.87695V392.52441z M148.0542,384.27148
c1.14648,0,2.08008-0.93359,2.08008-2.0791v-3.97266h25.55176v3.97266c0,1.14551,0.93262,2.0791,2.08008,2.0791
c1.14551,0,2.0791-0.93359,2.0791-2.0791v-3.97266h12.22168c1.58691,0,2.87695,1.28906,2.87695,2.875v7.27051h-64.06934v-7.27051
c0-1.58594,1.29102-2.875,2.87891-2.875h12.2207v3.97266C145.97412,383.33789,146.90771,384.27148,148.0542,384.27148"/>
<path class="selector-icon__img" d="M138.70068,416.73438h9.90332c1.14746,0,2.08008-0.93359,2.08008-2.0791v-9.35449
c0-1.14648-0.93262-2.08008-2.08008-2.08008h-9.90332c-1.14648,0-2.08008,0.93359-2.08008,2.08008v9.35449
C136.62061,415.80078,137.5542,416.73438,138.70068,416.73438 M146.5249,412.5752h-5.74414v-5.19531h5.74414V412.5752z"/>
<path class="selector-icon__img" d="M157.9585,416.73438h9.90332c1.14746,0,2.0791-0.93359,2.0791-2.0791v-9.35449
c0-1.14648-0.93164-2.08008-2.0791-2.08008h-9.90332c-1.14746,0-2.08008,0.93359-2.08008,2.08008v9.35449
C155.87842,415.80078,156.81104,416.73438,157.9585,416.73438 M160.03662,407.37988h5.74609v5.19531h-5.74609V407.37988z"/>
<path class="selector-icon__img" d="M177.76611,416.73438h9.90332c1.14648,0,2.08008-0.93359,2.08008-2.0791v-9.35449
c0-1.14648-0.93359-2.08008-2.08008-2.08008h-9.90332c-1.14746,0-2.08008,0.93359-2.08008,2.08008v9.35449
C175.68604,415.80078,176.61865,416.73438,177.76611,416.73438 M179.84521,407.37988h5.74609v5.19531h-5.74609V407.37988z"/>
<path class="selector-icon__img" d="M138.70068,435.99121h9.90332c1.14746,0,2.08008-0.93164,2.08008-2.0791v-9.35254
c0-1.14746-0.93262-2.08008-2.08008-2.08008h-9.90332c-1.14648,0-2.08008,0.93262-2.08008,2.08008v9.35254
C136.62061,435.05957,137.5542,435.99121,138.70068,435.99121 M146.5249,431.83301h-5.74414v-5.19531h5.74414V431.83301z"/>
<path class="selector-icon__img" d="M157.9585,435.99121h9.90332c1.14746,0,2.0791-0.93164,2.0791-2.0791v-9.35254
c0-1.14746-0.93164-2.08008-2.0791-2.08008h-9.90332c-1.14746,0-2.08008,0.93262-2.08008,2.08008v9.35254
C155.87842,435.05957,156.81104,435.99121,157.9585,435.99121 M160.03662,426.6377h5.74609v5.19531h-5.74609V426.6377z"/>
<path class="selector-icon__img" d="M177.76611,435.99121h9.90332c1.14648,0,2.08008-0.93164,2.08008-2.0791v-9.35254
c0-1.14746-0.93359-2.08008-2.08008-2.08008h-9.90332c-1.14746,0-2.08008,0.93262-2.08008,2.08008v9.35254
C175.68604,435.05957,176.61865,435.99121,177.76611,435.99121 M179.84521,426.6377h5.74609v5.19531h-5.74609V426.6377z"/>
</a>
</svg>
<p class="selector-block__title selector-block__title--join heading--2">Join</p>
<p class="selector-block__title selector-block__title--learn heading--2">Learn</p>
<p class="selector-block__title selector-block__title--connect heading--2">Connect</p>
</div>
</div>
<div class="col--6-12 col__m--12-12 col--flex-col">
<div class="selector-block__text selector-block__text--mia open" id="mia">
<p>Lorem ipsum dolor sit amet, no purto sonet utinam has. Ex his duis aperiri facilisi, labores nominavi reprimique cum ne, ad torquatos suscipiantur definitionem sea. Aeque nobis salutandi ei quo, nec et dicam definitiones. Nec ei harum adipisci, reque justo ius eu. Nec an prima ceteros scribentur, dicta soluta ponderum no mel. Alii molestiae referrentur no pro.</p>
</div>
</div>
</div>
答案 0 :(得分：1)
事实证明，如果没有明确设置高度，ie11将渲染所有高度为150px的svgs。
我设法通过计算高度与宽度的比率来解决这个问题，然后使用jquery在页面加载时获取svg的宽度，然后应用计算来设置显式高度。