Skip to content
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

fix: 💄 IE11 input height issue (#23955) #24673

Merged
merged 4 commits into from Jun 2, 2020

Conversation

xiaosongxiaosong
Copy link
Contributor

@xiaosongxiaosong xiaosongxiaosong commented Jun 2, 2020

[中文版模板 / Chinese template]

🤔 This is a ...

  • New feature
  • Bug fix
  • Site / documentation update
  • Demo update
  • Component style update
  • TypeScript definition update
  • Bundle size optimization
  • Perfermance optimization
  • Refactoring
  • Code style optimization
  • Test Case
  • Branch merge
  • Other (about what?)

🔗 Related issue link

fix #23955 again

💡 Background and solution

📝 Changelog

Language Changelog
🇺🇸 English Fix Input component height issue in IE11.
🇨🇳 Chinese 修复 Iuput 组件在 IE11 中高度异常问题。

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

  • Doc is updated/provided or not needed
  • Demo is updated/provided or not needed
  • TypeScript definition is updated/provided or not needed
  • Changelog is provided or not needed

@ant-design-bot
Copy link
Contributor

@ant-design-bot ant-design-bot commented Jun 2, 2020

@ant-design-bot
Copy link
Contributor

@ant-design-bot ant-design-bot commented Jun 2, 2020

@yoyo837
Copy link
Contributor

@yoyo837 yoyo837 commented Jun 2, 2020

CI failed

@xrkffgg
Copy link
Member

@xrkffgg xrkffgg commented Jun 2, 2020

PR 里的 changelog 填上

@xiaosongxiaosong
Copy link
Contributor Author

@xiaosongxiaosong xiaosongxiaosong commented Jun 2, 2020

@yoyo837 之前的 CI 失败问题已经修复了,现在 CI 失败应该和这个 PR 没有关系了

@xiaosongxiaosong
Copy link
Contributor Author

@xiaosongxiaosong xiaosongxiaosong commented Jun 2, 2020

@xrkffgg 已经补上了

@yoyo837
Copy link
Contributor

@yoyo837 yoyo837 commented Jun 2, 2020

yoyo837
yoyo837 approved these changes Jun 2, 2020
@codecov
Copy link

@codecov codecov bot commented Jun 2, 2020

Codecov Report

Merging #24673 into master will not change coverage.
The diff coverage is n/a.

Impacted file tree graph

@@           Coverage Diff           @@
##           master   #24673   +/-   ##
=======================================
  Coverage   99.21%   99.21%           
=======================================
  Files         365      365           
  Lines        7279     7279           
  Branches     2034     1983   -51     
=======================================
  Hits         7222     7222           
  Misses         57       57           

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 18e3e42...b215485. Read the comment docs.

@afc163
Copy link
Member

@afc163 afc163 commented Jun 2, 2020

@afc163
Copy link
Member

@afc163 afc163 commented Jun 2, 2020

需要检查确认一下 #20869 的问题。

@xiaosongxiaosong
Copy link
Contributor Author

@xiaosongxiaosong xiaosongxiaosong commented Jun 2, 2020

@afc163 我试了下把这些组件都叫上 vertical-align: middle; 后 win10 中的 chrome/firefox/ie11 可以对齐了,不知道是不是符合预期

image

ps: 另外发现 firefox 中 texterea 高度与其他浏览器中不一致

image

@afc163
Copy link
Member

@afc163 afc163 commented Jun 2, 2020

不应该默认加 vertical-align: middle,对默认排版样式有侵入性,目标是默认情况下走 baseline 能对齐。

@afc163
Copy link
Member

@afc163 afc163 commented Jun 2, 2020

建议给 IE11 加 css hack。

@codesandbox-ci
Copy link

@codesandbox-ci codesandbox-ci bot commented Jun 2, 2020

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit b215485:

Sandbox Source
antd reproduction template Configuration

@afc163 afc163 changed the title fix: 🏁 fix ie11 input height issue (#23955) fix: 💄 IE11 input height issue (#23955) Jun 2, 2020
afc163
afc163 approved these changes Jun 2, 2020
}
}
}
}
Copy link
Member

@afc163 afc163 Jun 2, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

搞一个 IE11.less 好了。

Copy link
Contributor Author

@xiaosongxiaosong xiaosongxiaosong Jun 2, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

下面的代码移动到 IE11.less 中然后在 index.less 中 import 吗?

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .@{ant-prefix}-input {
    height: @input-height-base;

    &-lg {
      height: @input-height-lg;
    }

    &-sm {
      height: @input-height-sm;
    }

    &-affix-wrapper {
      > input.@{ant-prefix}-input {
        height: auto;
      }
    }
  }
}

Copy link
Contributor

@yoyo837 yoyo837 Jun 2, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

是这个意思

Copy link
Contributor Author

@xiaosongxiaosong xiaosongxiaosong Jun 2, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

好的,改了已经

Copy link
Contributor

@yoyo837 yoyo837 Jun 2, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

等CI跑完了测一下IE和其他浏览器,我们IE不好找。

@afc163
Copy link
Member

@afc163 afc163 commented Jun 2, 2020

IE 测试没问题就合并了。

xrkffgg
xrkffgg approved these changes Jun 2, 2020
@xrkffgg xrkffgg merged commit 46955f9 into ant-design:master Jun 2, 2020
26 checks passed
07akioni pushed a commit to 07akioni/ant-design that referenced this issue Jun 4, 2020
* fix: 🏁 fix ie11 input height issue (ant-design#23955)

* style: fix style order issue

* fix: 🏁 fix input height issue with css hack

* fix: 💄 Put IE11 css hack in IE.less
@ycjcl868 ycjcl868 mentioned this pull request Jun 5, 2020
@afc163 afc163 mentioned this pull request Sep 14, 2020
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants