おはようございます。
こんにちは。
こんばんは。
ドラゴンです。
rowspanに"0"が指定されていると、描画が崩れてしまうことがあったので、
各ブラウザでどのように表示されるのか見ていきたいと思います。
★検証ブラウザ★
・Internet Explorer
・Google Chrome
・Microsoft Edge
目次
概要
★確認用のソース★
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form id="form1">
<div>
<table border="1">
<tr>
<td rowspan="0">テスト1</td>
<td rowspan="1">テスト2</td>
</tr>
<tr>
<td rowspan="1">テスト3</td>
<td rowspan="1">テスト4</td>
</tr>
</table>
</div>
</form>
</body>
</html>
rowspanが0でも問題なく表示されるブラウザ⇒Internet Explorer
rowspanが0だと描画が崩れてしまうブラウザ⇒Google Chrome、Microsoft Edge
★Google Chromeでの表示★
★Microsoft Edgeでの表示★
解決策
Visual Studioで開発していると「検証 (XHTML5): この属性に使用できる値に '0' は含まれていません。」と 警告を出してもらえるので気を付けることができます。しかし、JavaScriptでrowspanを動的に計算しないといけない場合は警告がでないため、気がつきません。
なので、rowspanが1以下になる場合は、必ず1を設定するようにすれば問題ないかと思います。
最後に
Internet Explorerのサポート終了に伴い、Internet Explorerを使っていたシステムが他のブラウザに 移行していくことがこれからどんどん増えていくでしょう。 Internet Explorer以外のブラウザではどのように動作するのかのノウハウを今後貯めていきたいものですね。それでは、ドラゴンでした～～～。
0 件のコメント:
コメントを投稿