Adobe®Illustrator®CS2のスライスでレイアウトが崩れる

長時間探してもこれといった解決策が見つからなかったので、たぶん遭遇してる方が少ないんだと思いますが、Adobe®Illustrator®CS2にはWeb用に画像を書き出す際の「スライス」という機能がついています。これを使うと、作成している画像を自由自在にスライスすることが可能ですので、たとえば画像右上の一部だけにリンクを貼るということも可能です。

このスライス機能を利用して、しかもTable書き出しではなく、CSS書き出しで画像を吐き出した場合、Internet Explorer®7以下に限って、レイアウトが崩れる現象が観察されました。ハックとか、position:absoluteの関係か…などいろいろ悩みましたが、どうやらIllustratorが吐き出すHTMLコードに問題があったようです。

<div id="index-17_">
	<img id="index_17" src="images/index_17.jpg" width="176" height="10" alt="" />
	</div>

これだと<img>タグの後に改行が入っています。この改行を単純に削除して

<div id="index-17_">
	<img id="index_17" src="images/index_17.jpg" width="176" height="10" alt="" /></div>

にすると、なぜかレイアウト崩れが解消しました。どうやら、場合によっては改行コードがレイアウト崩れに影響してしまうようですね。

もしかしたら、Illustratorなどで書き出したものでなくても、<img>タグの直後に改行を入れるとレイアウトがずれてしまう現象が起こる場合があるかもしれません。もちろん当方の環境でうまくいっただけなので、すべての環境で使えるかは分かりませんが、同じ現象の方、お試しください。

コメント