[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] 来ちゃったね、iOS8 - The iOS8 came.

来ちゃったね、iOS8。

The iOS8 came.

まだ更新はしてませんが、いろいろ問題があるみたいですね。

I've already heard several troubles about new iOS, so I've not update it yet.

また仕事で大量に最新 iOS 対応案件が降ってくるのかな。

Does the iOS8 make many jobs on me again?

やりがいがありそうです。

I'm excited with expectation.

そういう仕事が来たら、また問題と解決方法を模索して、記事にしたいと思います。

If such a work comes, I grope for the issues and  solutions again and want to write an article about it.

タグ：IOS

[Note] jQuery を困らせる製品 - A certain product against the jQuery

突然ですが、jQuery セレクターといえども、指定されたセレクターを解決できずに、降参することがあるよ、という話です。

I'm sure that there are some cases that the jQuery selector can't work as usual and should throw something exceptions, because jQuery doesn't support some strange usages.

自分が経験したのは、ASP.NET Web フォーム用の、某サードパーティ製コントロール コンポーネントの場合。

I experienced one of the situation when I used the control component product by the certain third party, for the ASP.NET Web Form.

なかなかよさそうなコンポーネントで、次にリリースするシステムに採用しました。

When I saw the demonstration, I felt good about the product, and I decided to adopt the product in my next Web App project.

一応、ユーザー要求として、エラーが発生したコントロールの外観を目立つようにしてほしい、ということで。

On the other hand, the system users required me to change the appearances of the error controls to attract attention.

jQuery を使って、定型的な実装を組み込みました。

Using jQuery, I incorporated typical implementation.

Page_Validators の中で IsValid が false の Validator の controltovalidate の色を変えるってやつです。

The process I implemented looked for the error controls with watching the IsValid property of Validators in Page_Validators, and set the appearance of the element specified by the controltovalidate property of the Validator as the id.

ところが、特定のコントロールでエラーを発生させると、外観変更部の jQuery セレクターが例外をスローするんです。

But, when the particular control's error occurred, the jQuery selector in above process threw the exception.

ちょっと調べてみたら、マークアップで ControlToValidate 属性に設定したコントロールのクライアント ID と、クライアントの controltovalidate プロパティの内容が違っていて。

After some my trace, I found  there was a difference between the "ControlToValidate" attribute in aspx markup for Validator Control and the "controltovalidate" property in the Client Validator Control.

controltovalidate には、たぶん内部の編集用エレメントの id なんでしょうが、知らない文字列が設定されている。

I didn't know the content of the "controltovalidate"; I thought it should be the client id of the something inner editable element among the component control.

その文字列の中に、文字としてコロン（:）があったりして。

And I found some colons (:) as the letter of the client id string.

jQuery セレクターに渡す文字列の中のコロンはフィルターのプレフィックスですから、id 文字列の中にコロンが含まれるのはまずいですよね。

I knew jQuery selector parses colon as the prefix for the filters, so I understood it was bad situation for jQuery.

こういう状態のエレメントを id から抽出しようとすると、jQuery セレクターはお手上げです。

When the jQuery selector was called with such above id, it should throw an exception.

他の文字ならまだしも、よりによってコロンを使わなくてもいいでしょうに。

I accept the secret tricks, but using colon as a letter of the id string of elements is bad.

なお、そういう id を持つエレメントでも、Native JavaScript の getElementById とかだと、ちゃんと取得してくれます。

In addition, the Native JavaScript getElementById method accepts even the elements having such id.

今回のケースでは、空の jQuery セレクターに対して、controltovalidate プロパティで特定されるエレメントを getElementById で取得して追加していくという方法を取りました。

With this case, I took the method that I got the element identified by controltovalidate property with getElementById method and added it into empty jQuery selector.

まあ…サードパーティ製コンポーネントも、いろいろ拡張機能を提供してくれるのはうれしいんですが。

I am glad that the component made in a third party provides various extensions, but ...

ここだけの話、こっそりつまんねー小細工すんなよ ... と思いました。

However, I never want bad secret tricks of their products.

タグ：プログラム JavaScript jQuery getElementById セレクター セレクタ フィルター フィルタ ASP.NET Validator バリデーター 妥当性検証 検証