実現したいこと
Safari でも Google Chrome と同じ見た目になるようにCSSだけで調整したいです
発生している問題
↓Google Chrome での表示(この表示に統一したい)
↓Safari での表示(余計なスペースが入っている)
該当のソースコード
html
1<html> 2 <head> 3 <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.css" rel="stylesheet"> 4 <style> 5 td { 6 border: 1px solid black; 7 } 8 </style> 9 </head> 10 11 <body> 12 <table> 13 <tr> 14 <td rowspan="12"> 15 X<br>X<br>X 16 </td> 17 <td rowspan="3">X</td> 18 <td rowspan="6">X</td> 19 <td rowspan="6">X</td> 20 <td rowspan="8">X</td> 21 <td colspan="2" rowspan="4">X</td> 22 </tr> 23 <tr> 24 </tr> 25 <tr> 26 </tr> 27 <tr> 28 <td rowspan="3">X</td> 29 </tr> 30 <tr> 31 <td colspan="2" rowspan="4">X</td> 32 </tr> 33 <tr> 34 </tr> 35 <tr> 36 <td rowspan="3">X</td> 37 <td rowspan="6">X</td> 38 <td rowspan="6">X</td> 39 </tr> 40 <tr> 41 </tr> 42 <tr> 43 <td colspan="2" rowspan="4">X</td> 44 <td rowspan="4">X</td> 45 </tr> 46 <tr> 47 <td rowspan="3">X</td> 48 </tr> 49 <tr> 50 </tr> 51 <tr> 52 </tr> 53 </table> 54 </body> 55</html>
試したこと
- table に height 指定 → 変化なし
- td に height 指定 → 変化なし
- td に line-height: 1em 指定 → Safari の方は小さくなるが、Google Chrome の方がもっと小さくなってしまう
- normalize.css を適用 → 変化なし
補足情報(FW/ツールのバージョンなど)
macOS用 Google Chrome 75.0.3770.100(Official Build)(最新)
macOS用 Safari 12.1.1