-
Notifications
You must be signed in to change notification settings - Fork 12
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Thinking of IE 🤔 #104
Thinking of IE 🤔 #104
Conversation
@@ -3,3 +3,4 @@ | |||
font-family: Meiryo, Yu Gothic Medium, system-ui, -apple-system, BlinkMacSystemFont, sans-serif; | |||
} | |||
</style> | |||
<script>window.MSInputMethodContext && document.documentMode && document.write('<script src="https://cdn.jsdelivr.net/gh/nuxodin/ie11CustomProperties@4.1.0/ie11CustomProperties.min.js"><\x2fscript>');</script> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
いくつか選択肢はあるけど、Storybookでは他のブラウザに影響を与えないこれで十分そう?なのでややお行儀の悪い方を入れてみました。
ref: #103 (comment)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@media
で IEでhover効いていないかもです。。。
https://caniuse.com/mdn-css_at-rules_media_hover
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
こりはわかりにくくて恐縮なのだけど、想定内の動作になるのだ・・!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ドキュメントに記載しておきました〜 3a27ab0
.spui-Button--large, | ||
.spui-Button--medium, | ||
.spui-Button--small { | ||
height: 1px; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
高さ自体はなんでもよさげさん?
ref: philipwalton/flexbugs#231 (comment)
Visit the preview URL for this PR (updated for commit 3a27ab0): https://ameba-spindle--pr104-chore-thinking-ie-inzdfo7v.web.app (expires Sat, 19 Dec 2020 03:58:00 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 |
✨✨ That's perfect, there is no visual difference! ✨✨ Check out the report here. |
hover時のstyleが効いてなさそうでしたけどこの辺りは許容する感じでしょうか? |
ありがとうございます〜こりは頻出質問でしたので、許容のむねドキュメントに追記しました。 3a27ab0 |
普通のボタンでもクリックすると文字がずれたのですが、これってもしやIE共通の動作でしたっけかね〜 (忘却彼方) |
IEはボタン押した時に文字がずれた記憶ありますね〜(うろ覚え) |
検索してみるとbuttonタグでずれるという現象あるみたいですね。 情報の欠落などはなさそうなのでこちらはこのままでよいですかね。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
私からはapproveさせていただきます。
ありがとうございます〜IE以外に影響がなさそうってreg-suitも言ってるので取り込んじゃいますね! |
実プロジェクトで利用するに当たり、IE11でも使えたほうが良いということでいくつか対応をしました。
align-items: center
とmin-height
を併用すると中央配置されない問題を解決しました 6fc6a13確認すること
StorybookのボタンをIE11で確認します。
Before
After
close #103