Git Product home page Git Product logo

Comments (13)

errorrik avatar errorrik commented on July 22, 2024

怎么个策略?

ui-support-ie ui-support-ie6?

from esui.

Justineo avatar Justineo commented on July 22, 2024

@errorrik 灰大的意思应该是用特性检查吧,比如 ui-support-rgbaui-support-border-radius 这样的,就像 GitHub 页面 HTML 元素上的那些 class。

from esui.

otakustay avatar otakustay commented on July 22, 2024

是的,我觉得用特性检测更好,且这些由控件自己来做,当然如果控件有需要,加个ie6的样式也行

from esui.

errorrik avatar errorrik commented on July 22, 2024
  1. 控件来做有可能会冲突吧
  2. 特性那么多,挂n个到body上,rule match的性能。。。

没有很具体的例子,所以,我也没法判断是不是应该开这个口。因为对于rgba和border-radius这种需求来讲,貌似不需要开这个口就能支持了

from esui.

otakustay avatar otakustay commented on July 22, 2024
  1. 因为是addClass,冲突也没关系吧,不会重复的
  2. 特性确实多,但其实和CSS有关的不多,且希望控件尽可能不用

我提这个是因为,有些东西只用CSS的优先级来控制优雅降级,虽然能降,但在低版本下太丑太丑……但只.ie6又显得奇怪

from esui.

errorrik avatar errorrik commented on July 22, 2024

那么,现在有啥场景是必须用的呢?有例子米?

from esui.

otakustay avatar otakustay commented on July 22, 2024

用IE低版本看看demo/Wizard.html就啥也明白了TQT因为用border-radius做三角箭头,不支持的浏览器下看很丑……但是又不能只用优先级做到没有border-radius的情况下用别的样式搞得稍微好看些

from esui.

errorrik avatar errorrik commented on July 22, 2024

还好吧,除了用了:before和:after,没看出啥兼容性问题来。transparent貌似也有兼容性问题,我找个ie6测试测试

from esui.

errorrik avatar errorrik commented on July 22, 2024

我觉得,ie6下,变成方型就好了,用下划线,让那些块紧凑点就行。。。

from esui.

otakustay avatar otakustay commented on July 22, 2024

这个外形的问题同时涉及到IE8,我们大概还没能连IE8也无视掉。仅使用标准的CSS覆盖关系要做出降级效果并不容易,如加个下划线的话,Chrome也会有下划线出来,反而破坏了Chrome下的美感。用CSS Hack当然可以,但合适吗?

from esui.

errorrik avatar errorrik commented on July 22, 2024
<!DOCTYPE html>
<html>
<head>
    <style>
    ul, li{padding:0;margin:0;list-style: none}
    li { float:left; height:24px; margin-right:-20px;}
    li span{line-height: 24px;padding:0 12px 0 0; background: #e4e4e4;height:24px;float:left;}
    .first span{padding-left:12px;}
    li b{width:0;height:0;line-height: 0;font-size:0;border:12px solid transparent;border-left-color:#e4e4e4;float:left;}
    li i{width:0;height:0;line-height: 0;font-size:0;border:12px solid #e4e4e4;border-left-color:transparent;float:left;}
    .current span{background: red;color:#fff;}
    .current b{border-left-color:red;}
    .current i{border-color:red;border-left-color:transparent;}
    </style>
</head>
<body>
<ul>
<li class="first"><span>1</span><b></b>
<li class="current"><i></i><span>2</span><b></b>
<li><i></i><span>3</span><b></b>
</ul>

临时随便做了个,ie7也支持,就是ie6不支持。我没太明白ie8为啥不支持

from esui.

otakustay avatar otakustay commented on July 22, 2024

好,看来是我记混了,对一些特性的支持我重新去梳理一下和UE及PM确认支持度吧

from esui.

errorrik avatar errorrik commented on July 22, 2024

好,对Wizard那个case,我的建议是:

  1. 放弃支持ie6,在ie6下显示并排并且间隔合理的方形块(通过css hack处理间隔)
  2. 如果想支持ie7,不要用:before和:after。如果不想支持,让ie7保持和ie6相同的效果。是否支持ie7可以根据浏览器统计和标签洁癖决定。

from esui.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.