blob: f3fbfffccaf8cac0c27caa4c4bd0b6497b5d175d (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
---
title: アイコン、画像の表示位置がずれる
slug: Web/Compatibility_FAQ/Misaligned_Icon.html
tags:
- Compatibility
- Layout
---
<h2 id="概要">概要</h2>
<p> アイコンや画像の表示位置がずれて表示されてしまいます。<br>
他のブラウザと比較した場合、上下左右にずれて表示されたり、横並びに表示されるべきアイコンや画像が縦並びに表示されたりします。</p>
<p> <img alt="" src="https://mdn.mozillademos.org/files/9973/0104_1.png" style="width: 500px; height: 240px;"> </p>
<p><img alt="" src="https://mdn.mozillademos.org/files/9975/0104_2.png" style="width: 621px; height: 240px; margin-right: 0px; margin-left: 0px;"></p>
<div style="float: left;"> </div>
<p> </p>
<h2 id="要因">要因</h2>
<p> 複数の要因が考えられますが、代表例として以下があります。</p>
<ol>
<li>
<p><strong>アイコンや画像が横幅に収まらず、折り返されている</strong><br>
span要素等のブロックが横幅に収まらずに折り返されて表示されている場合があります。<br>
ブラウザの違いによりインラインブロック間にできる間隔が異なる事がありますので、他のブラウザで横並びに表示できていても<br>
Firefoxで表示すると折り返され、縦並びに表示されてしまいます。</p>
<pre><code><font size="3"> .btn-pulldown-main {
box-sizing: border-box;
<font>width</font>: <strong>49.2%;</strong>
display: inline-block;
padding: 9px 0;
} </font></code></pre>
<p> </p>
</li>
<li>
<p><strong>zoomプロパティが使用されている</strong><br>
zoomプロパティが使用されている場合、Firefoxでは適応されません。<br>
他のブラウザでは、適応されているプロパティがFirefoxでは適応されていない場合、見栄えに差異が出てしまいます。<br>
よって、他のブラウザで調整した表示位置が、Firefoxでは誤った表示となってしまいます。</p>
<pre><code><font size="3"> .menu {
display: block;
position: absolute;
top: 0px;
right: 0px;
<font>zoom</font>: <strong>0.5;</strong>
} </font></code></pre>
<p> </p>
</li>
<li>
<p><strong>ブラウザの解像度の違いによる表示差異</strong><br>
ブラウザの解像度の違いによって、px指定されているマージンが表示上、異なってしまう場合があります。<br>
結果、アイコンや画像の表示位置がブラウザ間でずれて表示されてしまいます。</p>
<pre><code><font size="3"> img.message {
position: relative;
margin-top: -52px;
} </font></code></pre>
<p> </p>
</li>
</ol>
<h2 id="解決策">解決策</h2>
<p> 各要因の解決策の代表例として以下があります。</p>
<ol>
<li>
<p><strong>アイコンや画像が横幅に収まらず、折り返されている</strong><br>
各ブロックの横幅を調整することで解消されます。<br>
ブラウザによってインラインブロック間のマージンが異なる場合があるため、実際に表示させながら、横幅に各ブロックが収まる(折り返されない)様に調整していきます。</p>
<pre><code><font size="3"> .btn-pulldown-main {
box-sizing: border-box;
<font>width</font>: <strong>49.0%;</strong>
display: inline-block;
padding: 9px 0;
} </font></code></pre>
<p> </p>
</li>
<li>
<p><strong>zoomプロパティが使用されている</strong><br>
zoomプロパティはFirefoxでは適応されないため、<a href="https://developer.mozilla.org/ja/docs/Web/CSS/height">height</a>プロパティで位置を指定するのがよいです。<br>
その他の指定もpx指定で調整することで、他のブラウザとの表示差異はなくなります。</p>
<pre><code><font size="3"> インライン { <font>height</font>: <strong>80px;</strong>}
.menu {
display: block;
position: absolute;
<font>top</font>: <strong>-15px;</strong>
<font>right</font>: <strong>-10px;</strong>
} </font></code></pre>
<p> </p>
</li>
<li>
<p><strong>ブラウザの解像度の違いによる表示差異</strong><br>
アイコンの位置を<a href="https://developer.mozilla.org/ja/docs/Web/CSS/padding">padding</a>プロパティで再調整することで正しく表示させることが可能となります。</p>
<pre><code><font size="3"> img.message {
position: relative;
margin-top: -52px;
<font>padding</font>:<strong> 0 0 6px 0;</strong>
} </font></code></pre>
<p> </p>
</li>
</ol>
<h2 id="メリット">メリット</h2>
<p> ・他のブラウザでも互換性を維持することができます。</p>
<p><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ">戻る</a></p>
|
