iPhoneのSafariで動くCSSを書きたいです

先の悩みが解決しましたトタンに新しい壁が出来てしまいましたが、
レスポンシブ対応のホームページでiPhoneのSafariでだけ明らかに
レイアウト崩れが起きております。

添付画像のように、ブラウザ画面の右下固定で画像を置きたいのに
iPhoneのSafariだけ画像が左上にきます。

その画像を閉じるボタン(×マーク)も画像の右上に配置していますのに、
iPhoneのSafariだけ画像の外に(しかも画像の左下に)出ています。

iPhoneのSafariに対応します為にはどうしましたら宜しいでしょうか？

【CSS】

@media screen and (max-width: 768px) {
.panel{
position:fixed;
bottom:0px;
right:60px;
width:300px;
hight:auto;
z-index:10;
}
.kankan{
width: 350px;
height: auto;
}
.deleteButtonContainer {
width: 30px;
height: 30px;
position: absolute;
top: 2px;
right: -40px;
}
.deleteButton {
width: 100%;
height: 100%;
border-radius: 10px;
padding-left:0;
padding-right: 1.5px;
text-align: center;
line-height: 9px;
vertical-align: middle;
color:grey;
cursor: pointer;
position: absolute;
top: 0;
left: 3px;
}
}


【html】

<div id="banner_Panel" class="panel panel-default">
<a href="ttps://google.com"><img class="kankan" src="img.png" alt=""></a>
<div class="deleteButtonContainer">
<button type="submit" id="banner_Close" class="deleteButton">×</button>
</div>
</div>

No.1 回答者： wanderer1 回答日時： 2020/12/02 14:13

@media screen and (max-width: 768px) {

.panel{
position:fixed;
bottom:0px;
right:60px;
width:300px;
hight:auto; ←ココ間違ってます。heightでは？
z-index:10;
}


まず文字を訂正してみてください。
これでもダメなら検証してみようと思いますが。

この回答へのお礼

ありがとうございます。
修正致しましたが、表示は改善されませんでダメでした。
iPhoneのSafariだけ画像を表示させない(位置がダメなら表示すらさせない)
としました方法もご存じでしたらお願い致します。

お礼日時：2020/12/02 16:20