回答編集履歴
4
余計なセミコロンを削除
answer
CHANGED
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
target.css("background-size", "100% " + height);
|
|
16
16
|
target.css("line-height", height);
|
|
17
17
|
$('.' + get_line_height).remove();
|
|
18
|
-
$('.' + get_line_height_br).remove();
|
|
18
|
+
$('.' + get_line_height_br).remove();
|
|
19
19
|
}
|
|
20
20
|
underline();
|
|
21
21
|
$(window).resize(function () {
|
3
javascriptの変数get_line_heightが行をまたぐ場合に起きるバグを、brタグを直前に入れることで修正
answer
CHANGED
|
@@ -1,22 +1,24 @@
|
|
|
1
1
|
jQueryを使って文字の高さをpxで取得し、
|
|
2
2
|
それをline-heightとbackground-sizeの高さに適用することにしました。
|
|
3
|
-
|
|
3
|
+
```javascript
|
|
4
|
-
|
|
4
|
+
Math.trunc = Math.trunc || function (x) {
|
|
5
|
-
|
|
5
|
+
return x < 0 ? Math.ceil(x) : Math.floor(x);
|
|
6
|
-
|
|
6
|
+
}
|
|
7
|
-
|
|
7
|
+
function underline() {
|
|
8
|
-
|
|
8
|
+
var target = $('.parent');
|
|
9
|
-
|
|
9
|
+
var get_line_height = 'get_line_height';
|
|
10
|
+
var get_line_height_br = 'get_line_height_br';
|
|
10
|
-
|
|
11
|
+
var set_line_height = 1.5;
|
|
11
|
-
|
|
12
|
+
target.append('<br class="' + get_line_height_br + '"><span style="line-height:1em;" class="' + get_line_height + '">１行の高さ取得用</span>');
|
|
12
|
-
|
|
13
|
+
//↓IE11用にcalc()で囲む
|
|
13
|
-
|
|
14
|
+
var height = "calc( " + Math.trunc($('.' + get_line_height).outerHeight() * set_line_height) + 'px )';
|
|
14
|
-
|
|
15
|
+
target.css("background-size", "100% " + height);
|
|
15
|
-
|
|
16
|
+
target.css("line-height", height);
|
|
16
|
-
|
|
17
|
+
$('.' + get_line_height).remove();
|
|
18
|
+
$('.' + get_line_height_br).remove();;
|
|
17
|
-
|
|
19
|
+
}
|
|
20
|
+
underline();
|
|
21
|
+
$(window).resize(function () {
|
|
18
22
|
underline();
|
|
19
|
-
$(window).resize(function () {
|
|
20
|
-
underline();
|
|
21
|
-
|
|
23
|
+
});
|
|
22
|
-
|
|
24
|
+
```
|
2
特定のウィンドウ幅でずれるバグを修正(小数点切り捨てを実装)
answer
CHANGED
|
@@ -1,18 +1,21 @@
|
|
|
1
1
|
jQueryを使って文字の高さをpxで取得し、
|
|
2
2
|
それをline-heightとbackground-sizeの高さに適用することにしました。
|
|
3
3
|
<script>
|
|
4
|
+
Math.trunc = Math.trunc || function (x) {
|
|
5
|
+
return x < 0 ? Math.ceil(x) : Math.floor(x);
|
|
6
|
+
}
|
|
4
7
|
function underline() {
|
|
5
8
|
var target = $('.parent');
|
|
6
9
|
var get_line_height = 'get_line_height';
|
|
7
|
-
var
|
|
10
|
+
var set_line_height = 1.5;
|
|
8
11
|
target.append('<span class="' + get_line_height + '">１行の高さ取得用</span>');
|
|
12
|
+
//↓IE11用にcalc()で囲む
|
|
9
|
-
var height = "calc( " + $('.' + get_line_height).outerHeight()
|
|
13
|
+
var height = "calc( " + Math.trunc( $('.' + get_line_height).outerHeight() * set_line_height ) + 'px )';
|
|
10
14
|
target.css("background-size", "100% " + height);
|
|
11
|
-
target.css("line-height",height);
|
|
15
|
+
target.css("line-height", height);
|
|
12
16
|
$('.' + get_line_height).remove();
|
|
13
17
|
}
|
|
14
18
|
underline();
|
|
15
|
-
|
|
16
19
|
$(window).resize(function () {
|
|
17
20
|
underline();
|
|
18
21
|
});
|
1
ソースに余計な文字が入っていた
answer
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
target.append('<span class="' + get_line_height + '">１行の高さ取得用</span>');
|
|
9
9
|
var height = "calc( " + $('.' + get_line_height).outerHeight() + 'px + ' + margin + " )";
|
|
10
10
|
target.css("background-size", "100% " + height);
|
|
11
|
-
target.css("line-height",
|
|
11
|
+
target.css("line-height",height);
|
|
12
12
|
$('.' + get_line_height).remove();
|
|
13
13
|
}
|
|
14
14
|
underline();
|