html – css按钮活动状态导致文本移动?
发布时间:2020-12-14 23:48:29 所属栏目:资源 来源:网络整理
导读:我正在研究一些我正在研究的新网站的粗略示例. 出于某种原因,firefox(最新版本)中的后两个按钮会稍微移动文本,就像在进入活动状态时实现点击动画一样.为什么第一个按钮也不会遇到这个问题? 代码如下 fieldset style="width:320px; float:left;" legendPink
我正在研究一些我正在研究的新网站的粗略示例.
出于某种原因,firefox(最新版本)中的后两个按钮会稍微移动文本,就像在进入活动状态时实现点击动画一样.为什么第一个按钮也不会遇到这个问题? 代码如下 <fieldset style="width:320px; float:left;"> <legend>Pink Button</legend> <button class="pinkbutton"><span>MESSAGE HERE</span></button> <button class="pinkbuttondisabled" disabled="disabled"><span>DISABLED</span></button> </fieldset> <fieldset style="width:320px; float:left;"> <legend>Grey Button</legend> <button class="greybutton"><span>MESSAGE HERE</span></button> <button class="greybuttondisabled" disabled="disabled"><span>DISABLED</span></button> </fieldset> <fieldset style="width:320px; float:left;"> <legend>White Button</legend> <button class="whitebutton"><span>MESSAGE HERE</span></button> <button class="whitebuttondisabled" disabled="disabled"><span>DISABLED</span></button> </fieldset> css如下 .pinkbutton { border:1px solid #D2247b; width:150px; height:30px; background-color:#EF0093; color:#FFF;} .pinkbutton:hover {border:1px solid #FF4296; background-color:#FF5EAC;} .pinkbutton:active {border:1px solid #A61D61; background-color:#DC2F85; color:#333232;} .pinkbuttondisabled {border:1px solid #F3C4DB; width:150px; height:30px; background-color:#FDC6E2; color:#FFF;} .greybutton { border:1px solid #BBBBBB; width:150px; height:30px; background-color:#E2E2E2; color:#8d8c8c;} .greybutton:hover {border:1px solid #EF0093; background-color:#E2E2E2; color:#f62c92;} .greybutton:active {border:1px solid #696969; background-color:#BFBFBF; color:#424242;} .greybuttondisabled {border:1px solid #D5D4D4; width:150px; height:30px; background-color:#F4F4F4; color:#d5d4d4;} .whitebutton { border:1px solid #EF0093; width:150px; height:30px; background-color:#FFF; color:#EF0093;} .whitebutton:hover {border:1px solid #898989; background-color:#FFF; color:#898989;} .whitebutton:active {border:1px solid #898989; background-color:#E2E2E2; color:#979696;} .whitebuttondisabled {border:1px solid #FAB2DE; width:150px; height:30px; background-color:#FFF; color:#FAB2DE;} 任何帮助将不胜感激 解决方法
出现在:活动状态有一些填充.我添加了’padding:0;’到最初的css声明(以便它不管状态而继承)并修复了问题.
请看这jsfiddle. 我不知道为什么它只发生在最后2个按钮上. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |