按钮形式与 CSS3 和跨浏览器的对齐
我一直在尝试让文本字段和按钮彼此齐平，我尝试了两种方法，使用高度以及仅填充，但是当一种方法适用于一种浏览器时，它不适用于另一种浏览器，反之亦然。
有谁知道如何解决这个问题？下面有一个屏幕截图。
http://img291.imageshack.us/i/75462612.png/
屏幕截图来自使用下面的代码 - 当我使用填充而不是高度时，firefox看起来不错，但是chrome没有对齐..
.buttons {
font-family:arial;
font-size:18px;
height:38px;
margin-left:-1px;
border:1px solid #b4b4b4;
background: -webkit-gradient(linear, left top, left bottom, from(#cb43b3), to(#a5108b));
background: -moz-linear-gradient(top, #cb43b3, #a5108b);
-moz-border-top-right-radius:5px;
border-top-right-radius:5px;
-moz-border-bottom-right-radius:5px;
border-bottom-right-radius:5px;
color:#fff;
}
.buttons:hover {
background: -webkit-gradient(linear, left top, left bottom, from(#a5108b), to(#cb43b3));
background: -moz-linear-gradient(top, #a5108b, #cb43b3);
}
.textarea {
border:1px solid #b4b4b4;
-moz-border-top-left-radius:5px;
border-top-left-radius:5px;
-moz-border-bottom-left-radius:5px;
border-bottom-left-radius:5px;
-moz-box-shadow: inset 2px 2px 2px 2px #cfcfcf;
-webkit-box-shadow: inset 2px 2px 2px 2px #cfcfcf;
box-shadow: inset 2px 2px 2px 2px #cfcfcf;
box-shadow: inset 2px 2px 2px 2px #cfcfcf;
padding:7px;
font-family:arial;
font-size:18px;
color:#7e7e7e;
width:300px;
}
假设除了body标签之外没有其他代码..即使尝试只使用body标签这个问题仍然存在。
I've been trying to get a textfield and button to align flush with each other, I have tried two methods, using height, as well as just padding, but when one works for one browser, it doesn't work for the other, and vise versa.
Does anyone know of how to fix this problem? a screenshot is present below.
http://img291.imageshack.us/i/75462612.png/
The screenshot is from using the code below - and when I use padding instead of height, firefox looks fine, but chrome is unaligned..
.buttons {
font-family:arial;
font-size:18px;
height:38px;
margin-left:-1px;
border:1px solid #b4b4b4;
background: -webkit-gradient(linear, left top, left bottom, from(#cb43b3), to(#a5108b));
background: -moz-linear-gradient(top, #cb43b3, #a5108b);
-moz-border-top-right-radius:5px;
border-top-right-radius:5px;
-moz-border-bottom-right-radius:5px;
border-bottom-right-radius:5px;
color:#fff;
}
.buttons:hover {
background: -webkit-gradient(linear, left top, left bottom, from(#a5108b), to(#cb43b3));
background: -moz-linear-gradient(top, #a5108b, #cb43b3);
}
.textarea {
border:1px solid #b4b4b4;
-moz-border-top-left-radius:5px;
border-top-left-radius:5px;
-moz-border-bottom-left-radius:5px;
border-bottom-left-radius:5px;
-moz-box-shadow: inset 2px 2px 2px 2px #cfcfcf;
-webkit-box-shadow: inset 2px 2px 2px 2px #cfcfcf;
box-shadow: inset 2px 2px 2px 2px #cfcfcf;
box-shadow: inset 2px 2px 2px 2px #cfcfcf;
padding:7px;
font-family:arial;
font-size:18px;
color:#7e7e7e;
width:300px;
}
Just assume this has no other code except the body tags..as even trying with just body tags this problem still persists.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
稍微修改了一下...
Modified it a bit...