Geebarwan
V2EX  ›  CSS

求 chrome 浏览器下面,让 px 支持小数的办法!

  •  
  •   Geebarwan · Aug 7, 2016 · 7506 views
    This topic created in 3744 days ago, the information mentioned may be changed or developed.

    我 css 是用了百分比去换算宽度,有些宽度是有小数的,因为有边框,所以导致每行的宽度都是不一样的,求解决办法!感谢!

    Supplement 1  ·  Aug 7, 2016

    这个是我的chrome下面的例子

    Supplement 2  ·  Aug 7, 2016
    感谢各位,已经解决好了,用就是的方式,大概思路就是,查找左边 和 右边,如果有边框,就放到父级容器上面去,把当前的左边框或者有边框移除!
    Supplement 3  ·  Aug 7, 2016
    用的是 js 的方式,打错字了!
    Supplement 4  ·  Aug 10, 2016

    最后还是换成了用css的方式去解决,js的不完美,而且不好操作,解决的思路:


    当我去查看火狐的比例的时候,宽度的百分比他会自动算精度,比如 8.333333333333332 会换算成 8.33333%,16.666666666666664 会换算成 16.6667,所以 直接正则替换 就好了。

    25 replies  •  2016-08-07 21:39:09 +08:00
    marsLeo
    marsLeo
    Aug 7, 2016 via Android
    1
    一般 px 单位不应该用小数吧?具体是怎样的需求,你最好贴图说明一下。
    另外,用深色的阴影可以模拟边框效果,而且不占宽度。
    issuz
    issuz
    Aug 7, 2016 via iPhone
    2
    box-sizing:border-box ;
    Geebarwan
    Geebarwan
    OP
    Aug 7, 2016
    3
    @issuz 这个貌似不行因为我下面每一个都是一个 div
    Geebarwan
    Geebarwan
    OP
    Aug 7, 2016
    4
    @marsLeo 你好,图片已经更新了,可以看看效果图
    choury
    choury
    Aug 7, 2016 via Android
    5
    小数的怎么显示呢?显示器显示半个像素?
    learnshare
    learnshare
    Aug 7, 2016
    6
    这个布局用表格来做
    yoa1q7y
    yoa1q7y
    Aug 7, 2016
    7
    这个跟是什么浏览器没关系, css 目前就是不支持
    iTakeo
    iTakeo
    Aug 7, 2016 via iPhone❤️1
    8
    最小像素就是 1px
    dcalsky
    dcalsky
    Aug 7, 2016 via Android
    9
    解决需求的方式不一定只有一种。你可以将所有 form element 都放在 form 里,然后为这个 form 设置边框,这样就解决了无法对齐的问题。
    billlee
    billlee
    Aug 7, 2016
    10
    显卡表示半个像素实在做不到啊
    LancerComet
    LancerComet
    Aug 7, 2016
    11
    这是百分比人工算好后写的小数点像素么?

    如果是这样就不如改成 rem 或 em 这样的单位,计算交给样式表预处理去做
    Geebarwan
    Geebarwan
    OP
    Aug 7, 2016
    12
    @choury 比如 火狐可以 width:600.08px
    Geebarwan
    Geebarwan
    OP
    Aug 7, 2016
    13
    @learnshare 这个已经用 bootstrap 的删格来做了,只是把 div display 弄成 table-cell ,来模拟一些 table 有的属性,不过这个问题不是这个问题导致的!
    Geebarwan
    Geebarwan
    OP
    Aug 7, 2016
    14
    @yoa1q7y 有点蛋疼,那就只能 js 搞定了
    Geebarwan
    Geebarwan
    OP
    Aug 7, 2016❤️1
    15
    @dcalsky 很早就是这样的,但是需求就是每个表单元素都可能有 /无 边框
    Geebarwan
    Geebarwan
    OP
    Aug 7, 2016
    16
    @billlee 哈哈 火狐可以
    Geebarwan
    Geebarwan
    OP
    Aug 7, 2016
    17
    @LancerComet bt 删格是百分比的,不好改了,只能 js 去弄弄了,获得第一个子元素如果 left 有 border 就变成父级的 left 的 border , right 也是同样的道理,这样就不会有这个问题了,不过看看 有没有其他的解决方案!
    choury
    choury
    Aug 7, 2016
    18
    @yangyifan 火狐也不可以显示出 0.08px ,最多是给你对齐了罢了,硬件没法做到的事软件也不可能完成
    choury
    choury
    Aug 7, 2016
    19
    @yangyifan 查了下,对于小数的 px ,有的浏览器是取整,有的是四舍五入,所以你用小数就没办法让所有浏览器的显示效果相同
    Geebarwan
    Geebarwan
    OP
    Aug 7, 2016
    20
    @choury 是的只能用不正常的办法去解决这个问题了!
    happlebao
    happlebao
    Aug 7, 2016
    21
    里面再套一层固定宽度的 div 不就好了。。
    happlebao
    happlebao
    Aug 7, 2016
    22
    怕挡字的话 margin 留大一点就好了
    learnshare
    learnshare
    Aug 7, 2016
    23
    @yangyifan 用表格来做比较合适,删格不适合处理带边框的布局
    Geebarwan
    Geebarwan
    OP
    Aug 7, 2016
    24
    @happlebao 我已经弄好了,不过是用 js 的方式
    Geebarwan
    Geebarwan
    OP
    Aug 7, 2016
    25
    @yangyifan 已经用删栏了,就只能用它了,不过我已经解决好了!
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   659 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 66ms · UTC 20:09 · PVG 04:09 · LAX 12:09 · JFK 15:09
    ♥ Do have faith in what you're doing.