问答详情
源自:1-4 使用radio制作导航(添加样式)

chrome下单选按钮设置宽高不生效

为什么在chrome下我的单选按钮设置宽高厚大小还是一直不变?我的chrome版本42,64bit,但是在火狐下按钮就变大了。老师的视频不就是在chrome下录制的么,为何相差这么大。。。有没有人和我遇到一样的问题啊?

提问者:B10041104 2015-05-29 01:00

个回答

  • 戴眼镜的粉红兔子
    2016-11-30 10:49:18

    在手机上设置宽高也不起作用啊  样子没变大 生效区域也没变大


  • qq_木头一个_0
    2015-06-09 09:46:13

    这里并不是要他“看起来”变大了,而是要他的”生效区域“变大;有些浏览器,设置了宽高后,那个小按钮看起来没变大,但是实际上,他的作用范围是变大了的。你可以尝试一下鼠标点击他的旁边,不要点击那个小按钮,看看能不能选中按钮。如果能,那么这个效果就足够了。只要在你需要设置的范围内,点击鼠标,能够让他变成checked状态就行了。至于他看起来怎么样大小不重要。

  • ♣衣锦
    2015-05-31 00:15:03

    原生单选按钮和多选按钮那么丑,样式还不好兼容,所以用图片代替吧

  • Y_du
    2015-05-29 15:41:38

    #raidobtn {
    -webkit-appearance: none; 
    -moz-appearance: none;
    }

    这样能实现大小一致,不过会破坏input text="radio"原有的样式。不推荐使用,你的问题应该是浏览器预编译出现的问题。期待大牛有更好的解决方式。

  • B10041104
    2015-05-29 01:23:28

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #test{
    background-color: #ccc;
    border:1px solid red;
    width: 200px;
    height: 200px;
    }
    #radiobtn{
    height: 100px;
    width :100px;
    
    }
    </style>
    </head>
    <body>
    <div id="test">
    <input type="radio" id="radiobtn"> test</input>
    </div>
    </body>
    </html>

    代码如上,分别截图:

    firefox上长这样:

    http://img.mukewang.com/55674e8300015a9212680870.jpg

    chrome下长这样:

    http://img.mukewang.com/55674ef50001c38c05580660.jpg


    求帮忙。。。。