Q&A
borderではなくpaddingを使うとは目から鱗です。思いつきもしませんでした。ご回答ありがとうございました。
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件
0
ベストアンサー
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
総合スコア36163
0
根本的な解決ではありませんが、この形でしたら、共通のコードで同様の表示かと思います。
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}
投稿2021/08/02 13:13
総合スコア1293
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/08/03 03:52
2021/08/03 04:29