回答編集履歴

3

書式の改善

2018/07/29 07:03

投稿

退会済みユーザー
test CHANGED
@@ -8,7 +8,7 @@
8
8
 
9
9
  padding: 5px;
10
10
 
11
- border-bottom: dotted 2px #BDB76B;
11
+ border-bottom: dotted 2px #BDB76B; // ← 画像下の点線の正体
12
12
 
13
13
  color: #000000;
14
14
 

2

書式の改善

2018/07/29 07:03

投稿

退会済みユーザー
test CHANGED
@@ -1,7 +1,43 @@
1
- jsFiddleで再現してみましたが、質問者様の言う現象は起こりませんでした。
2
-
3
- [jsFiddle](https://jsfiddle.net/nwx6tcvo/6/)
1
+ ポップアップ画像の下に点線が現れる正体ですが、下記のスタイルのborder-bottomがあたっているのが原因かと思います。
4
2
 
5
3
 
6
4
 
5
+ ```
6
+
7
+ .hinagata a {
8
+
9
+ padding: 5px;
10
+
7
- chromeのデベロッパーツールで点線部分の正体を探してみてください。
11
+ border-bottom: dotted 2px #BDB76B;
12
+
13
+ color: #000000;
14
+
15
+ font-size: 14px;
16
+
17
+ text-decoration: none
18
+
19
+ }
20
+
21
+
22
+
23
+ /*
24
+
25
+ .popupに対してborder-bottomのプロパティを無効にする。
26
+
27
+ */
28
+
29
+ .hinagata .popup {
30
+
31
+ border-bottom: 0;
32
+
33
+ }
34
+
35
+ ```
36
+
37
+
38
+
39
+ 質問者様のコードをもとにサンプルを作成しました。
40
+
41
+ ご確認ください。
42
+
43
+ [jsFiddle](https://jsfiddle.net/nwx6tcvo/16/)

1

リンク先変更

2018/07/29 07:01

投稿

退会済みユーザー
test CHANGED
@@ -1,6 +1,6 @@
1
1
  jsFiddleで再現してみましたが、質問者様の言う現象は起こりませんでした。
2
2
 
3
- [jsFiddle](https://jsfiddle.net/nwx6tcvo/3/)
3
+ [jsFiddle](https://jsfiddle.net/nwx6tcvo/6/)
4
4
 
5
5
 
6
6