IEでtwitter-bootstrapを使うとラベルの角が丸くなくって残念な感じになるのだけど、CSS3Pieを使うことで

• border-radius
• box-shadow

が解決する。

bootstrap-sassと一緒に使う

インストール

$ compass create bstrap -r bootstrap-sass --using bootstrap
$ cd bstrap
$ compass install compass/pie

これで stylesheets/PIE.htc, sass/pie.scss, stylesheets/pie.css の3つのファイルが導入される。

PIE.htcのコンテントタイプをtext/x-componentにしなければならないという問題が残っている。apacheを使っている場合は.htaccessにでも書いておけばいいらしいが、Flaskの場合はデフォルトでapplication/octet-streamで送ってしまうのでどうにかしないといけない。

FlaskでPIE.htcのContent-Typeをtext/x-componentにする。

Reponseオブジェクトのmimetypeを指定して返すようにする。

@app.route("/PIE.htc")
def pie_htc():
  handle = open("static/bstrap/stylesheets/PIE.htc", 'r+')
  return Response(handle, mimetype='text/x-component')

使う

pieをincludeする

.test-box {
  @include pie;
  @include border-radius(3px);
}