Themeforestなどレスポンシブ・ウェブデザインのCSSでYahoo!JavaScriptマップのコントロールが干渉した時の対処法

昨日書いたThemeforestで購入したテーマにYahoo! JavaScriptマップをいれるとコントローラーが正常に表示されなくなる件。

たまたま今日もその対策をしようといろいろいじっていたら、Yahoo! JavaScriptマップに表示されるコントローラーの画像を発見。

なるほど、こんなふうにスプライトになっているので、max-widthが100%とかされてしまうとおかしくなるようだ。

で、別件でjQuery Mobileのサイトをいじっていたところ、こちらでもYahoo! JavaScript Mapのコントローラーがおかしくなった。CSSでみてみると昨日と同じように、max-width: 100%が原因らしい。

なので、”max-width 干渉”で検索したところ、下記のサイトを発見。

こちらは、GoogleMapとTwitter Bootstrapの干渉について説明しているが、Yahoo!JavaScript Mapもこの”max-width: none”が使えそう。早速、自分のサイトでもヘッダーにYahoo!JavaScriptマップ用のスタイルを下記のように記述。

<style type="text/css">
div.yolp-noprint img {
	max-width: none;
}
</style>

結果、無事にレスポンシブのCSSがきいていても、Yahoo!JavaScritpマップのコントローラーが正常に表示されるようになりました。めでたしめでたし。