[Tips] IE10 で td に colspan や rowspan を使うとボーダーが表示されない問題 - The issue of invisible borders using colspan or rowspan to td in IE10

Internet Explorer 10 固有の問題です（追記：このエントリーを書いた時点の最新の IE は IE11 です）。

It is a problem peculiar to Internet Explorer 10 (postscript: the latest IE when I wrote this entry is IE11). 

table 内の td タグで colspan や rowspan を使った場合、他の IE やブラウザーではきちんとボーダーが表示されるのに、IE10 でのみボーダーが期待通りに表示されないことがあります。

When you use colspan attr or rowspan attr in td tag, some borders may not be displayed as expected only in IE10, against the other IE versions.

開発者ツールを使って原因を調べようとすると、マウス オーバーした途端に再描画が走ってちゃんとボーダーが表示されたりするので、イラッとします。

If you use the F12 Developper Tool to check the cause of this issue, you will become nervous because the trouble does not happen as expected; the borders will be drawn as usual by unexpected being redrawn.

こういうシチュエーションで発生します。

It occurs in following situations.

<style type="text/css">
table {
    border-collapse: collapse;
}
td {
    border: 1px solid black;
}
</style>
<table>
    <tr>
        <td id="td1">・・・</td>
        <td id="td2">・・・</td>
        <td id="td3">・・・</td>
    </tr>
    <tr>
        <td id="td4" colspan="3">・・・</td>
    </tr>
</table>

このようなマークアップだと、よく上段の td2 と td3 の下のボーダーが表示されなくなります。

In such above markup, a border under td2 and also a border under td3 are not displayed.

また、同じ css を使うとして、以下のような場合でも発生します。 

In addition, same trouble occurs by the following markup too .

<table>
    <tr>
        <td id="td5" rowspan="3">・・・</td>
        <td id="td6">・・・</td>
    </tr>
    <tr>
        <td id="td7">・・・</td>
    </tr>
    <tr>
        <td id="td8">・・・</td>
    </tr>
</table>

このようなマークアップだと、よく右側の td7 の左のボーダーが表示されなくなります。

In such a markup, the left-side border of right td7 is not displayed.

対処法は地味ですが簡単で、大きいほうの td の（表示されない）ボーダーを描画しないようにします。 

The actions to be taken are time-consuming, but simple and  easy. You do not draw the border of the larger td.

<table>
    <tr>
        <td id="td1">・・・</td>
        <td id="td2">・・・</td>
        <td id="td3">・・・</td>
    </tr>
    <tr>
        <td id="td4" colspan="3" style="border-top: none;">・・・</td>
    </tr>
</table>

<table>
    <tr>
        <td id="td5" rowspan="3" style="border-right: none;">・・・</td>
        <td id="td6">・・・</td>
    </tr>
    <tr>
        <td id="td7">・・・</td>
    </tr>
    <tr>
        <td id="td8">・・・</td>
    </tr>
</table>

面倒ですが、他のブラウザーでの見た目も違和感がない状態で対応できます。

It is a troublesome method, but a problem does not occur by all browsers.

タグ：IE IE10 HTML TD ボーダー border colspan rowspan

[Note] スクリプトに繊細な IE - IE is delicate to a script

IE の JavaScript エンジンが、連想配列の最後の要素の後のコンマでエラーになることは有名ですが。

It is famous that the script engine of the IE disallow the comma (,) after the last element of an associative array.

今回は、違うパターンでハマった話です。

This article is about a trouble in another pattern.

つい先日、はじめて ASP.NET AJAX 対応の ユーザー コントロールを作りました。

A few days ago, I created an user control of ASP.NET that supported ASP.NET AJAX client framework, for the first time.

そこで、どうにも納得できない状態になりました。

And I faced the trouble that I couldn't understand.

aspx マークアップ内のスクリプト ブロックに書いた特定のスクリプトが反応しないんです。

The specified script in the script block of an aspx markup did not work.

Visual Studio デバッグ実行のときは問題なく動いていたのに、デプロイしたら動かないんです。

It had worked in the Visual Studio debug running, but it did not work after deploying.

せめて IE がエラーを出してくれれば問題を見つけやすいのですが、なにも言ってくれない。

I was sure that I could find the problem faster if IE told me something about the error, but the IE told me nothing.

さんざん調べてみたんですが、決定的な原因は見つからず。

I looked for the decisive cause of the trouble badly, but I couldn't.

でも、何行か文末にセミコロン（;）がない行が見つかって、気持ち悪いから直してみたら…。

By the way, I found some script lines had no semicolon (;) at the end of line, and modified it ...

動きました。

It worked.

そんな理由？

Was it caused by such a reason?

『最後のコンマ』の場合は、IE がエラーで教えてくれるから、まだ助かります。

The IE tells me about the "last comma" as an error, I'll notice it.

今回の『セミコロンの欠落』は、なにも教えてもらえなかっただけに、何時間も無駄にしました。

In this case "lost semicolon", I wasted much time because IE told me nothing.

気をつけよう。

I'll be careful in future.

タグ：JavaScript IE Internet Explorer

[Note] 厄介な JavaScript コメント - Troublesome JavaScript comment

ある Web システムで、IE8、IE11、iPad ではちゃんと動くんですが。 

A certain Web system worked on IE8, IE11, or iPad.

IE9 と IE10 だけ動きませんでした。 

But it didn't work on IE9, or IE10.

なんで？　なにが起きた？　どういうコードになってるの？ 

Why? What's happened? How was it coded?

例外をキャッチして分析してみたら、JavaScript ファイルの中に、以下のような一連のコメントがありました。 

I caught the exception, and analyzed it, then I found that there are a series of comments in a javascript file as following;

/*@cc_on
var doc = document;
eval('var document = doc');
@*/

この一連のコメントはよく知られたテクニックで、スクリプトの高速化のために使われます。 

These a series of comments are well known technique, they are used for the speedup of the script.

IE8 では、これらのコメントは JScript の @cc_on ステートを以ってスクリプトに解釈され、そのコードが window.document オブジェクトの再定義を行います。 

On IE8, the series of comments is parsed to script with "@cc_on" statement of the "JScript", and the parsed codes redefine the window.document object with "eval" function.

これでスクリプトが高速になるんです。 

It makes the script faster.

しかし、IE9 と IE10 では、この一連のコメントは IE8 同様にスクリプトに解釈されますが、window.document オブジェクトを再定義しようとした時点で例外がスローされます。

However, On IE9 or IE10, the series of comments is parsed to script with "@cc_on" statement same as IE8, but the exception is thrown when the window.document object is redefined.

IE9 と IE10 では、window.document オブジェクトは const として定義されているので、再定義できないんです。

On IE9 and IE10, the window.document object has been defined as "const", it's impossible to be redefined.

IE11 の場合、これらのコメント自体が解釈されません。IE11 が @cc_on をサポートしていないためです。 

On IE11, the series of comments is NOT parsed, because IE11 does NOT support the "@cc_on" statement.

なので、 window.document オブジェクトの再定義は実行されません。

Then, redefining of the window.document object never be done.

iPad の場合、Microsoft の製品ではないので、JScript も "@cc_on" もわかりません。 

On iPad, Safari Mobile knows neither JScript nor "@cc_on", because it is not Microsoft's products.

これがすべてです。 

That's the reason at all.

このテクニックはおもしろいし、特定の局面ではふさわしい解決方法になりえると確信しますが。 

I think that this technique is interesting, and I'm sure that it can become a good solution in the special situation.

でも、もしこう独特のテクニックを使う場合は、 使う側の責務として、動作要件に最大限の注意を払うべきと思います。

But, when we use an odd technique such as this, we must pay the greatest attention to operating requirements.

ちなみにこのコード、あってもなくても変わりませんでした。 

By the way, with or without this technique, the script execution speed did not change with IE8.

そもそもいらねーじゃんというお話です。 

It was unnecessary implementation, in the first place.

タグ：JavaScript jscript IE Internet Explorer