請參閱所附影像中的雪佛龍。第一個來自桌面 Chrome 瀏覽器。它在包括 Safari 在內的標準桌面瀏覽器中以這種方式呈現。它還在 Chrome 開發工具設備模擬（包括 iPhone 12）和真正的 Android 設備上以這種方式呈現。
第二張圖片顯示了它如何在真實的 iPhone 12 和設備模擬（例如 lambdatest 或 browserstack）上呈現。雪佛龍至少大 100%。
我嘗試添加一個 position: relative 樣式到雪佛龍及其父 div 沒有運氣。
標記：
<div id="alert-message" class="warning" aria-live="assertive">
<div id="alert-message-header" data-bind="click: toggleAlertMessageBody()">
<span id="alert-icon"></span>
<span id="alert-header-text">Other shops may have earlier availability.</span>
<button id="alert-chevron" name="alert-chevron-btn" type="button"></button>
</div>
<div id="alert-message-body" >Body</div>
CSS：
#alert-message {
margin-bottom: 32px;
border: 1px solid;
border-radius: 5px;
font-family: 'Roboto';
font-style: normal;
}
#alert-message #alert-message-header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 12px 16px 12px 16px;
min-height: 41px;
font-weight: 500;
cursor: pointer;
line-height: 26px;
position: relative;
}
#alert-message #alert-message-body {
margin: 0 15px;
padding: 8px 16px 12px 16px;
border-top: 1px solid;
color: #525656;
line-height: 26px;
font-weight: 400;
}
#alert-message.warning,
#alert-message.warning-info {
background-color: #fef6e8;
border-color: #e86421;
}
#alert-message.warning #alert-message-body,
#alert-message.warning-info #alert-message-body {
border-color: #e86421;
}
#alert-message.warning #alert-icon {
background: url("/Shared/images/alert-circle-yellow.svg") no-repeat;
min-width: 15px;
max-height: 25px;
background-position: center;
background-size: 100% auto;
}
#alert-message #alert-header-text {
padding: 0 10px;
color: #000000;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
#alert-message.warning #alert-chevron {
background: url("/Shared/images/chevron-up-yellow.svg") no-repeat;
min-width: 15px;
max-height: 25px;
background-position: center;
background-size: 100% auto;
}
#alert-message #alert-chevron {
position: relative;
border: none;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
#alert-message #alert-chevron.collapsed {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
#alert-message b {
color: #000000;
}
嘗試替換 #alert-message-header div 上的最小高度，該 div 包含高度為 48px 的 V 形；。沒變。
SVG：
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="9" viewBox="0 0 15 9">
<path fill="#E86421" fill-rule="nonzero" d="M7.5 0a.806.806 0 0 0-.593.265L.246 7.455a.957.957 0 0 0 0 1.28.796.796 0 0 0 1.185 0l6.07-6.55 6.068 6.55a.796.796 0 0 0 1.186 0 .957.957 0 0 0 0-1.28L8.093.265A.806.806 0 0 0 7.5 0"/>
</svg>
uj5u.com熱心網友回復：
- 您可以使用 safary 除錯模擬器，為此，首先在計算機的 safary 上添加 devtools，您可以啟用它
preferences/advanced，在螢屏底部標記復選框。 - 然后在模擬器的瀏覽器上導航到您的網頁
- 現在回到你電腦的安全區
- 進入主選單/開發
- 在那里，搜索您的模擬器的名稱并單擊此選項。（safary 會打開模擬器頁面的開發工具）。
我希望這可以幫助你：D
uj5u.com熱心網友回復：
我不知道“為什么”，但洗掉了 background-size: 100% auto; 從雪佛龍（并保留它作為警報圖示）解決了這個問題。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/533201.html
標籤：cssIOSsvg
下一篇：如何使用形狀創建透明蒙版