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

List组件 在ie下的只兼容9,但是会报foreach的错 #8784

Closed
RRRRROOOO opened this Issue Dec 29, 2017 · 11 comments

Comments

Projects
None yet
7 participants
@RRRRROOOO

RRRRROOOO commented Dec 29, 2017

Version

3.0.3

Environment

ie edge

Reproduction link

https://ant.design/components/list-cn/

Steps to reproduce

使用ie浏览器打开连接, 有头像的list显示不正常,可能是flex 不兼容, ie9、10的环境是正常显示 ,但是foreach报错, ie11 无法正常显示,foreach不报错

with use ie,the list is not normal css,and ie9、10 foreach warring, ie11(edge)css is Insanity

What is expected?

能够兼容ie9 以上的版本,都能够不报错吧,正常显示

Can be compatible with more than IE9 version, can not report the wrong, normal display

@ant-design-bot

This comment has been minimized.

Show comment
Hide comment
@ant-design-bot

ant-design-bot Dec 29, 2017

It will be better to write your issue/comment in English, so more people can understand you.
And this means that more people can help you or benefit from your issue/comment.
See: #4897

ant-design-bot commented Dec 29, 2017

It will be better to write your issue/comment in English, so more people can understand you.
And this means that more people can help you or benefit from your issue/comment.
See: #4897

@yesmeck

This comment has been minimized.

Show comment
Hide comment
@yesmeck

yesmeck Dec 29, 2017

Member

对于 IE 系列浏览器,需要提供 es5-shim 和 es6-shim 等 Polyfills 的支持。

https://ant.design/docs/react/getting-started-cn#%E5%85%BC%E5%AE%B9%E6%80%A7

Member

yesmeck commented Dec 29, 2017

对于 IE 系列浏览器,需要提供 es5-shim 和 es6-shim 等 Polyfills 的支持。

https://ant.design/docs/react/getting-started-cn#%E5%85%BC%E5%AE%B9%E6%80%A7

@johnnychq

This comment has been minimized.

Show comment
Hide comment
@johnnychq

johnnychq Dec 29, 2017

antd官方组件demo里也有这个问题,看样子跟polyfills没关系

johnnychq commented Dec 29, 2017

antd官方组件demo里也有这个问题,看样子跟polyfills没关系

@johnnychq

This comment has been minimized.

Show comment
Hide comment
@johnnychq

johnnychq Dec 31, 2017

关于IE报错 - antd官网报错

forEach报错应该是antd官方网站的报错,跟antd本身没有关系。具体是调用了NodeList的forEach方法,但这个方法目前IE不支持

https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach

image

关于IE报错 - 开发环境报错

我猜你开发环境IE下面的报错,是因为roadhog的缘故,参见:sorrycc/roadhog#497

最后

LIST样式兼容性问题是存在的,但根IE报错应该没必然的关系,只不过IE报错不方便你开发环境下调试排查。

johnnychq commented Dec 31, 2017

关于IE报错 - antd官网报错

forEach报错应该是antd官方网站的报错,跟antd本身没有关系。具体是调用了NodeList的forEach方法,但这个方法目前IE不支持

https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach

image

关于IE报错 - 开发环境报错

我猜你开发环境IE下面的报错,是因为roadhog的缘故,参见:sorrycc/roadhog#497

最后

LIST样式兼容性问题是存在的,但根IE报错应该没必然的关系,只不过IE报错不方便你开发环境下调试排查。

afc163 referenced this issue in ant-design/bisheng-plugin-antd Dec 31, 2017

@afc163 afc163 closed this Dec 31, 2017

@johnnychq

This comment has been minimized.

Show comment
Hide comment
@johnnychq

johnnychq Dec 31, 2017

@afc163 哥,css兼容性问题还没修复,别急着close掉呃

johnnychq commented Dec 31, 2017

@afc163 哥,css兼容性问题还没修复,别急着close掉呃

@johnnychq

This comment has been minimized.

Show comment
Hide comment
@johnnychq

johnnychq Dec 31, 2017

 <style type="text/css">
    .ant-list-item .ant-list-item-meta-avatar, .ant-list-item .ant-list-item-meta-content{
      flex: none;
      -ms-flex: none;
    }
  </style>

我遇到的场景,先这么临时解决了

但全局修改很暴力,另外,没有测所有用例的List, 我只测了自己的场景, 比较简单

image

johnnychq commented Dec 31, 2017

 <style type="text/css">
    .ant-list-item .ant-list-item-meta-avatar, .ant-list-item .ant-list-item-meta-content{
      flex: none;
      -ms-flex: none;
    }
  </style>

我遇到的场景,先这么临时解决了

但全局修改很暴力,另外,没有测所有用例的List, 我只测了自己的场景, 比较简单

image

@afc163 afc163 reopened this Dec 31, 2017

@benjycui

This comment has been minimized.

Show comment
Hide comment
@benjycui

benjycui Jan 2, 2018

Contributor

@afc163 close now?

Contributor

benjycui commented Jan 2, 2018

@afc163 close now?

@johnnychq

This comment has been minimized.

Show comment
Hide comment
@johnnychq

johnnychq Jan 2, 2018

@benjycui 样式问题还没解决,怎么close呢。。

johnnychq commented Jan 2, 2018

@benjycui 样式问题还没解决,怎么close呢。。

@johnnychq

This comment has been minimized.

Show comment
Hide comment
@nikogu

This comment has been minimized.

Show comment
Hide comment
@nikogu

nikogu Jan 2, 2018

Contributor

@JohnnyChen 这个我稍后修复

Contributor

nikogu commented Jan 2, 2018

@JohnnyChen 这个我稍后修复

nikogu added a commit that referenced this issue Jan 2, 2018

@nikogu

This comment has been minimized.

Show comment
Hide comment
@nikogu

nikogu Jan 2, 2018

Contributor

#8798

多谢反馈。

原因是在 ie11 下,如果两个并排布局都定义了 flex 属性,则 flex-grow: 0 会被压缩(即使小于本身宽度),处理办法就是只定义 flex-grow: 1 的一方,另一方不定义 flex 属性即可,所有浏览器都会按照默认本身的宽度来处理。

Contributor

nikogu commented Jan 2, 2018

#8798

多谢反馈。

原因是在 ie11 下,如果两个并排布局都定义了 flex 属性,则 flex-grow: 0 会被压缩(即使小于本身宽度),处理办法就是只定义 flex-grow: 1 的一方,另一方不定义 flex 属性即可,所有浏览器都会按照默认本身的宽度来处理。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment