firefoxでのposition:absoluteのずれ

firefoxでのposition:absoluteを設定した際に他ブラウザと若干異なる表示になってしまいます。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
6  <style>
7    /*
8    html5doctor.com Reset Stylesheet
9    v1.6.1
10    Last Updated: 2010-09-17
11    Author: Richard Clark - http://richclarkdesign.com
12    Twitter: @rich_clark
13    */
14    
15    html, body, div, span, object, iframe,
16    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
17    abbr, address, cite, code,
18    del, dfn, em, img, ins, kbd, q, samp,
19    small, strong, sub, sup, var,
20    b, i,
21    dl, dt, dd, ol, ul, li,
22    fieldset, form, label, legend,
23    table, caption, tbody, tfoot, thead, tr, th, td,
24    article, aside, canvas, details, figcaption, figure,
25    footer, header, hgroup, menu, nav, section, summary,
26    time, mark, audio, video {
27        margin:0;
28        padding:0;
29        border:0;
30        outline:0;
31        font-size:100%;
32        vertical-align:baseline;
33        background:transparent;
34    }
35    
36    body {
37        line-height:1;
38    }
39    
40    article,aside,details,figcaption,figure,
41    footer,header,hgroup,menu,nav,section {
42        display:block;
43    }
44    
45    nav ul {
46        list-style:none;
47    }
48    
49    blockquote, q {
50        quotes:none;
51    }
52    
53    blockquote:before, blockquote:after,
54    q:before, q:after {
55        content:'';
56        content:none;
57    }
58    
59    a {
60        margin:0;
61        padding:0;
62        font-size:100%;
63        vertical-align:baseline;
64        background:transparent;
65    }
66    
67    /* change colours to suit your needs */
68    ins {
69        background-color:#ff9;
70        color:#000;
71        text-decoration:none;
72    }
73    
74    /* change colours to suit your needs */
75    mark {
76        background-color:#ff9;
77        color:#000;
78        font-style:italic;
79        font-weight:bold;
80    }
81    
82    del {
83        text-decoration: line-through;
84    }
85    
86    abbr[title], dfn[title] {
87        border-bottom:1px dotted;
88        cursor:help;
89    }
90    
91    table {
92        border-collapse:collapse;
93        border-spacing:0;
94    }
95    
96    /* change border colour to suit your needs */
97    hr {
98        display:block;
99        height:1px;
100        border:0;  
101        border-top:1px solid #cccccc;
102        margin:1em 0;
103        padding:0;
104    }
105    
106    input, select {
107        vertical-align:middle;
108    }
109
110    .contain {
111      display: table;
112      margin: 32px auto;
113      border: 16px solid #fff;
114      border-radius: 10px;
115      box-shadow: 0px 0px 12px 4px rgba(0,0,0,.1);
116    }
117
118    .square {
119      position: relative;
120    }
121
122    .square::before {
123      position: absolute;
124      top: 0;
125      right: 0;
126      left: 0;
127      margin: auto;
128      height: 40px;
129      width: 100px;
130      background: skyblue;
131      content: '';
132    }
133  </style>
134</head>
135<body>
136  <div class="contain square">
137    <img src="hoge.jpg">
138  </div>
139</body>
140</html>

画像サイズは400px × 400pxです。
win10のchrome,opera,edgeで確認したところ、.square::beforeの位置はborder-topの直下に配置されるのですが、firefoxのみborder-topと重なって配置されてしまいます。
今のところ、firefoxだけに適用するコードを追加して対処をしようと考えているのですが、それ以外の方法があれば教えて頂きたいです。
宜しくお願い致します。

行動規範の内容に同意します

回答2件

ベストアンサー

display: tableが原因のようです。
テーブルレイアウトは仕様で「不定」が多く、ブラウザによって表示が異なることがあります。
きっちりしたレイアウトが必要な時は使わない方が無難です。

css
1        .contain {
2            /* display: table; 削除 */
3            width: max-content; /* 代わりにこれを */
4            margin: 32px auto;
5            border: 16px solid #fff;
6            border-radius: 10px;
7            box-shadow: 0px 0px 12px 4px rgba(0, 0, 0, .1);
8        }

投稿2021/08/03 01:03

Lhankor_Mhy

総合スコア36960

gedachtnis

2021/08/03 03:52

原因はdisplay: table;なのですね。明らかになってよかったです。max-contentという値も初めて知りました。ご回答ありがとうございました。

Lhankor_Mhy

2021/08/03 04:29

お役に立てたようで何よりです。

行動規範の内容に同意します

根本的な解決ではありませんが、この形でしたら、共通のコードで同様の表示かと思います。

css
1.contain {
2	display: table;
3	margin: 32px auto;
4	/*border: 16px solid #fff;*/
5	padding: 16px; /* 追加 */
6	border-radius: 10px;
7	box-shadow: 0px 0px 12px 4px rgba(0,0,0,.1);
8}
9
10.square::before {
11	position: absolute;
12	/*top: 0;*/
13	top: 16px; /* 追加 */
14	right: 0;
15	left: 0;
16	margin: auto;
17	height: 40px;
18	width: 100px;
19	background: skyblue;
20	content: '';
21}