Snow-Materia > <q>の前後に引用符をつける


本文

前書き

IEで自動ではクオーテーションが付かない(付けられない) <q>要素の前後に " (&quot;) をつけます。

サンプル

ソースコード

/* quotation */
q {
    zoom: expression(
        this.style.zoom || (
            this.innerHTML = ' &quot; ' + this.innerHTML + ' &quot; ', 1
        )
    );
    white-space:normal;
}

絶対誰も使わなさそうなスタイルとして style.zoom としていますが、 className とか style.width とかでもいいかも知れません。

/* quotation */
q {
    behavior: expression(
        (this.className && this.className.indexOf(' iex') <= 0) ? 1 : (
            this.innerHTML = ' &quot; ' + this.innerHTML + ' &quot; ',
            this.className = (this.className || '') + ' iex'
        )
    );
    white-space:normal;
}

備考

また、ここでは 「<q>要素のクオーテーション」 ってことで紹介しましたが、これは、 q:before, q:after { content: '"'; } とやってることとだいたい同義です。
つまり、<q>以外の要素でもできるし、 &quot;じゃなくたっていいわけです。

それと、ひとつ大事な注意点として。
これを使ってクオーテーションとかが増えたせいで 結果的な半角羅列になって、 ブラウザの横スクロールバーがでてない状態から出る状態になると、 だいたい100%ブラウザクラッシュします。(笑えない)
間違っても q { white-space:nowrap; } とかやっちゃいけませんw q { white-space:normal; } のままでよろしく。
' &quot; ' の前後にスペースいれてるのも、それ対策です。

ページ情報
関連
目次
公開
2005.01.11