質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Safari

SafariはAppleのウェブブラウザであり、Mac OS XとiOSのデフォルトのブラウザです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1669閲覧

Safariでtrタグに対するbackground-imageの仕様

nelpesica

総合スコア159

Safari

SafariはAppleのウェブブラウザであり、Mac OS XとiOSのデフォルトのブラウザです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/09/24 04:30

編集2020/09/24 06:15

以下のソースはWindowsの各種ブラウザ(IEを除く)で見たときに『終了しました』という背景画像がtrに対して中央に表示されるのですが、macのSafariおよびiPadOSのSafari・Chromeで見たときにth tdの2箇所に対して中央表示されます。
ブレイクポイント以下でth tddisplay:blockに変えると期待通りの表示になるので、おそらくdisplay:table-cellが原因だと思うのですが、Safari等でも『終了しました』という画像をtrに対して表示させるにはどうしたらいいでしょうか?

##正しく表示されない動作確認環境

  • Windows10のIE11
  • macOS10.15のSafari最新版(Chrome最新版では異常なし)
  • iPadOS13.6のSafari最新版

##該当ソース

html

1<table class="scheduleTable"> 2 <tbody> 3 <tr class="scheduleTable__row--end"> 4 <th class="scheduleTable__head">日付</th> 5 <td class="scheduleTable__data"> 6 <dl class="scheduleList"> 7 <dt class="scheduleList__ttl">タイトル</dt> 8 <dd class="scheduleList__item">内容</dd> 9 <dd class="scheduleList__item">内容</dd> 10 <dd class="scheduleList__item">内容</dd> 11 <dd class="scheduleList__item">内容</dd> 12 </dl> 13 </td> 14 </tr> 15 <tr class="scheduleTable__row"> 16 <th class="scheduleTable__head">日付</th> 17 <td class="scheduleTable__data"> 18 <dl class="scheduleList"> 19 <dt class="scheduleList__ttl">タイトル</dt> 20 <dd class="scheduleList__item">内容</dd> 21 <dd class="scheduleList__item">内容</dd> 22 <dd class="scheduleList__item">内容</dd> 23 </dl> 24 </td> 25 </tr> 26 </tbody> 27</table>

scss

1*, *::before, *::after { 2 box-sizing: border-box; 3} 4html { 5 font-size: 62.5%; 6} 7body { 8 color: #444; 9 line-height: 1.6; 10 background-color: #eee; 11 font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; 12 font-size: 1.6rem; 13} 14.scheduleTable { 15 width: 100%; 16 max-width: 1080px; 17 margin: 0 auto; 18 border-collapse: collapse; 19 border-spacing: 0; 20 border: none; 21} 22.scheduleTable__row--end { 23 background-image: url(http://placehold.jp/d42d6b/fff/250x50.png?text=終了しました); 24 background-position: center; 25 background-repeat: no-repeat; 26 opacity: 0.99; 27 background-color: #aaa; 28 .scheduleTable__head, 29 .scheduleTable__data { 30 z-index: -1; 31 opacity: .5; 32 background-image: none; 33 } 34} 35.scheduleTable__head { 36 width: 160px; 37 padding-left: 1em; 38 border: 1px solid #00a0e9; 39 border-right: none; 40 color: #2e3c96; 41 font-weight: bold; 42 font-size: 1.8rem; 43} 44.scheduleTable__data { 45 border: 1px solid #00a0e9; 46 border-left: none; 47 padding: 4px; 48} 49.scheduleList__ttl { 50 font-size: 1.8rem; 51 color: #00a0e9; 52 font-weight: bold; 53} 54 55 56@media screen and (max-width: 768px) { 57 .scheduleTable__head, 58 .scheduleTable__data { 59 border-bottom: none; 60 display: block; 61 width: 100%; 62 padding: 10px; 63 } 64 .scheduleTable__head { 65 border-right: 1px solid #00a0e9; 66 background-color: rgba(0, 160, 233, 0.1); 67 } 68 .scheduleTable__data:last-child { 69 border-left: 1px solid #00a0e9; 70 } 71 .scheduleTable__row:last-child .scheduleTable__data { 72 border-bottom: 1px solid #00a0e9; 73 } 74 .scheduleTable + .scheduleTable { 75 margin-top: 20px; 76 } 77}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2020/09/24 04:39

OSの問題というよりブラウザの問題では? ブラウザの種類とバージョンを追記ください
yambejp

2020/09/24 04:57

mac/iOSでよいのですね?windowsは対象外ですか?
nelpesica

2020/09/24 05:00

WindowsのChrome、Firefox、Edgeでは正常に表示されていますので大丈夫です。
yambejp

2020/09/24 05:02

単純にmac/iOSのsafariで表示がおかしいということですか? それならそういう仕様なのでは?
nelpesica

2020/09/24 05:05

ですので、mac/iOSのsafariの解決(回避)方法を知りたいのです。
yambejp

2020/09/24 05:07

.scheduleTable__row--end内の .scheduleTable__head, .scheduleTable__data { のセクションを削除しても同様ですか?
nelpesica

2020/09/24 06:34

セクションを削除するというのはth,td要素を削除するということでしょうか?
guest

回答1

0

自己解決

table-cellに問題があることがわかりましたので、見た目を維持したたまflexとblock要素にすることで問題を回避することができました。
以下、追加ソースです。

SCSS

1.seminarScheduleTable__row { 2 display: flex; 3 @media screen and (max-width: 768px) { 4 flex-direction: column; 5 } 6 &--end { 7 @extend .seminarScheduleTable__row; 8 } 9} 10.seminarScheduleTable__head { 11 display: block; 12 flex: 0 1 auto; 13} 14.seminarScheduleTable__data { 15 display: block; 16 flex: 1 1 auto; 17}

投稿2020/09/24 06:53

nelpesica

総合スコア159

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問