IE11バグ display table, table-cell 内で max-width が効かない

IE11… またお前か！
max-widthのバグが多いですねw

display: table, display: table-cell の中にある img タグのmax-width: 100% が無視されて、要素からはみ出したりしてしまう問題。

<div class="table">
  <div class="table-cell">
    <img class="max-width-100per">
  </div>
</div>

table-layout: fixed を使うと max-width が効く

display: table を持っている要素に table-layout: fixed を設定すると、table-cell 中にある画像の max-width が有効になる。

‘table-cell’ 内に inner のdiv 要素などを置いても画像の max-width は無視されてしました…

サンプル

See the Pen IE11 max-width un available in display: table, table-cell by KIKIKI (@chaika-design) on CodePen.

IE 滅ぶべし！

---

[参考]

• IE11でimg要素にmax-width: 100%;が効かない場合の対処法 - E-riverstyle Vanguard

セントールの悩み(1)【特典ペーパー付き】 (RYU COMICS)

IEバグ inline-block 内の要素に max-width が効かないにハマる

コーディングをしていて IE で崩れていると連絡を受けてしまいました。
IE11のサポートしてたのですが、まぁ流石にもうIEでも大丈夫だろうと思ってたら、まさかIE6時代のようにバグに遭遇してしまいました。
マイクロソフトを信じたのが間違いだった...

発生していたバグ: inline-blockが親要素を突き破ってしまう例

inline-blockで横並びにした要素内の画像が親要素の幅を無視して表示されてしまっていた。

HTML

div(class="inline-block width200px")
  div(class="inline-block")
    img(src="width 300px の画像")

div(class="block width200px")
  div(class="inline-block")
    img(src="width 300px の画像")

CSS

.block
  display: block
.inline-block
  display: inline-block
.width200px
  width: 200px
img
  max-width: 100% // width: 100% か max-width: 100% が無いと要素を突き破る
  height: auto

このようにwidthが200pxに指定された要素の中に、inline-block要素が入り、その中に200pxより大きな300px幅の画像が入るような構成の場合、Chrome, Safari, Firefoxではmax-widthが効き囲っている要素のwidthに画像が縮小されますがが、IE11はボックスは200pxのまま、inline-blockは画像幅の300pxになり親要素を突き破ってしまいます。

これは、画像のwidth、max-widthを指定してない時の表示と同じ感じでした。

IE 11 inline-block が中の要素の max-width: 100% が効かず親要素のwidth指定を無視してしまうっぽい

どうやらIE11ではmax-widthが指定された要素の親にinline-blockが指定されている時、親であるinline-block要素にwidthの指定がないと、例えinline-block要素の親要素にwidthが指定されていてもmax-widthが効かずこの幅を無視して突き破ってしまう問題があるようです。

解決方法 1. 画像の max-width:100% を辞めて、width: 100% にする

例えばレスポンシブなものとかで画像が拡大されてしまってもOKなら画像の max-width:100% を width:100% に変更するのが簡単です。

div(class="inline-block width200px")
  div(class="inline-block")
    img(src="width 300px の画像") ← width: 100% にする

div(class="block width200px")
  div(class="inline-block")
    img(src="width 300px の画像") ← width: 100% にする

解決方法 2. inline-block に width の指定をする

表示幅が決まっているなら画像の親のinline-block要素にwidthの指定をするのが簡単です。

div(class="inline-block")  ← width 指定無くてもOK
  div(class="inline-block") ← この要素にwidthを指定
    img(src="width 300px の画像")

div(class="block")   ← width 指定無くてもOK
  div(class="inline-block") ← この要素にwidthを指定
    img(src="width 300px の画像")

※ widthの指定は 100% でもOKでした。

解決方法 2. 親要素を display: inline-block でないものにする

画像を囲っている要素の display: inline-block を display: block、display: inline にした場合も画像のmax-widthは親の親要素の指定に準拠して表示されました

div(class="inline-block width200px") 
  div(class="block") ← この要素のdisplayを block か inline に変更
    img(src="width 300px の画像")

div(class="block width200px")
  div(class="block")  ← この要素のdisplayを block か inline に変更
    img(src="width 300px の画像")

サンプル

ちょっと横幅があるので、CODEPNのサイトで見たほうが見やすいかも。
👇
https://codepen.io/chaika-design/pen/gRjQqo

See the Pen IE11 inline-block bug test by KIKIKI (@chaika-design) on CodePen.

　
最初 max-width が効かなくなってるって事に気づかなくて時間がかかってしまった。。。
未だにIE使ってる人なんているのかなぁ...？ マイクロソフトのブラウザを使うのは今すぐやめるんだ!!

---

バグズ・ライフ [Blu-ray]

Git log 指定日からの作業内容をテキストファイルに出力したい

日報とか週報とかの提出を求められる時、いちいちテキストを書くのがメンドーなのでgit logをテキストファイルとして出力したいと思いました。

1. 今日とか1週間とかの git log をいい感じにして表示する

1週間分の自分のコミットを [YYYY-MM-DD] ハッシュ: コミット時のコメント で表示するコマンドは次のような感じでできました。

git log 
  --oneline --branches --reverse
  --author="$(git config user.name)"
  --date=iso --since="1week" 
  --pretty=format:"[%ad] %h: %s"

※ 長いから改行しているけど、コマンドラインなら1行で

使用しているオプションの説明

• --branches
  全てのブランチを対象にする。
  オプションがないと今いるブランチのみが対象になる
• --author
author="name" で指定したAuthorのlogだけを取得
  "$(git config user.name)" とすれば .gitconfig にある user.name が対象になる
• --date
date="sio" - “YYYY-MM-DD HH mm ss フォーマット date="short" - YYYY-MM-DD フォーマット iso だと時刻が表示されてしまうので、作業時間がバレるのは ちょっとなー って場合は short を指定したほうが良さそう
• --since
  いつのコミットから表示するか
  日報のように今日の分だけなら --since="today"
--since="2017-06-25" のように日付を指定することもできる
• --pretty=format:
  log を表示するフォーマット
  • %ad - コミットした時間 (-date= オプションに従った形式)
  • %h - コミットのハッシュ (短縮版)
  • %s - コミットコメント その他、詳しいオプションについては「git logのフォーマットを指定する - Qiita」に詳しく載っています

2. git log をファイルに出力する

いい感じの git log の表示オプションが作れたら、次はlogをファイルに出力します。
ファイルへの出力はコマンドの最後に > ファイル名 をつけるだけ。
log.txt というファイルを作って出力する場合は次のような感じ

git log 
  --oneline --branches --reverse
  --author="$(git config user.name)"
  --date=short --since="1week" 
  --pretty=format:"[%ad] %h: %s"
  > log.txt

※ 長いから改行しているけど、コマンドラインなら1行で

コマンドを実行すると、コマンドを実行した場所に log.txt が作成されます。

3. 作成したgit logのコマンドをエイリアス化して、日付を引数で渡せるようにする

毎回この長いコマンドを実行するのもメンドーなので、コマンドをエイリアス化して、開始日(since)の指定をオプションで渡せるようにしたいと思います。
git コマンドの エイリアスはglobalなら.~/.gitconfigに、現在の作業リポジトリなら .git/config ファイルに記入されるので、ここに直接コマンドを書いてエイリアスを作成します。

今回は、あるプロジェクトでだけ使いたかったので、リポジトリ内の .git/config に下記のエイリアスコマンドを追記しました。

[alias]
  logfile = "!f () {\
    git log --oneline --branches --reverse --date=short\
    --author=\"$(git config user.name)\"\
    --pretty=format:\"[%ad] %h: %s\"\
    --since=\"$1\"\
    > ../log.txt;\
  };f"

コマンドのエイリアス名は logfile としました。
で、この作業リポジトリ内で 次のようなコマンドを実行すると、、、

$ git logfile today

本日のコミットログをリポジトリのあるディレクトリの1つ上の階層に log.txt ファイルとして書き出せるようになりました！
₍₍ ᕕ(´ ω` )ᕗ⁾⁾ ﾔｯﾀｾﾞ

global のエイリアスにする場合は ログファイルの書き出し先のパスをデスクトップにするとか適時工夫する必要があるかと思います。

---

[参考]

• “git log” で今日行った作業を表示&ファイル出力するときの注意 - Qiita
• git logのフォーマットを指定する - Qiita
• How do I export a git log to a text file? - Stack Overflow
• Gitのエイリアスで引数を使う

入門git