HTML・CSS・Javascriptなどのメモブログ│CODE-LIFE

WEB製作の仕事を始めたMaruのhtml・CSS・jsメモブログ。たまにExcelVBAの話もでます。

楽天 スマホ商品ページ共通説明文の画像CSSが書き換えられていた

楽天 スマホ商品ページ共通説明文の画像CSSが書き換えられていた

商品ページ共通説明文の画像に対して厄介なCSSが記述されていました。

gista516c703c5d264491359

共通説明文内の画像すべてに
block表示
横幅最大100%
余白0
が、!importantで強制的に適用されるというふざけた記述。

 

importantつけてんじゃねえよ!ヽ(`Д´#)ノ ウワーン

 

サイドフローティングバナーなどを使っている店舗は強制的に画面幅いっぱいに表示されたり、
display:none;で一時的にバナーを非表示にしていたりする店舗は勝手にdisplay:block;で上書きされて表示されていたり・・・。

 

要注意ですね。

 

 

対策としては楽天CSSよりも要素名を詳細に指定してimportantをさらに上書きすること。

 

#shopCommonText img よりも詳細に

div#shopCommonText img と指定し、プロパティにも !important をつければOKです。

gist1a60124abc9610dc8f44

というかんじですね。

 

今回の仕様変更、CSSを適用していない店舗ならばwidth="100%"の指定が省けるので大助かりでしょうけど独自にCSSを適用している店舗はorz

朝から1時間ほど無駄にしました。