楽天 スマホ商品ページ共通説明文の画像CSSが書き換えられていた
商品ページ共通説明文の画像に対して厄介なCSSが記述されていました。
共通説明文内の画像すべてに
block表示
横幅最大100％
余白0
が、!importantで強制的に適用されるというふざけた記述。
importantつけてんじゃねえよ！ヽ(｀Д´#)ﾉ ｳﾜｰﾝ
サイドフローティングバナーなどを使っている店舗は強制的に画面幅いっぱいに表示されたり、
display:none;で一時的にバナーを非表示にしていたりする店舗は勝手にdisplay:block;で上書きされて表示されていたり・・・。
要注意ですね。
対策としては楽天のCSSよりも要素名を詳細に指定してimportantをさらに上書きすること。
#shopCommonText img よりも詳細に
div#shopCommonText img と指定し、プロパティにも !important をつければOKです。
というかんじですね。
今回の仕様変更、CSSを適用していない店舗ならばwidth="100%"の指定が省けるので大助かりでしょうけど独自にCSSを適用している店舗はorz
朝から1時間ほど無駄にしました。
今年の4月からWEB製作の仕事を始めたが、やはり初めてやる仕事でつまずくことが多々ある。