V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
yangyifan
V2EX  ›  CSS

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

  •  
  •   yangyifan · 2016-08-07 13:07:35 +08:00 · 6288 次点击
    这是一个创建于 2809 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    第 1 条附言  ·  2016-08-07 14:34:26 +08:00

    这个是我的chrome下面的例子

    第 2 条附言  ·  2016-08-07 21:40:04 +08:00
    感谢各位,已经解决好了,用就是的方式,大概思路就是,查找左边 和 右边,如果有边框,就放到父级容器上面去,把当前的左边框或者有边框移除!
    第 3 条附言  ·  2016-08-07 21:41:40 +08:00
    用的是 js 的方式,打错字了!
    第 4 条附言  ·  2016-08-10 18:34:53 +08:00

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


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

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

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