![](/img/trans.png)
[英]Rounded corners in safari/chrome are not rounded on hover for first second
[英]Rounded buttons breaks in chrome and safari
为了创建圆形按钮,我使用了三个图像:左图像,右图像和一条图像。 一切正常的地方,但在野生动物园和Chrome中,正确的图像出现在下一行,我不明白为什么会这样。 因此,请有人帮我,这是html标记及其CSS。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body{width: 980px;margin: 0 auto}
.light_button a {background:url("images/center.png") repeat-x scroll 0 0 transparent;color:#000000;display:inline-block;font-size:16px;font-weight:bold;height:34px;line-height:29px;position:relative;text-align:center;text-decoration:none;}
.light_button .lout {background:url("images/left.png") no-repeat scroll 0 0 transparent;float:left;height:31px;left:-8px;position:absolute;width:8px;}
.light_button .rout {background:url("images/right.png") no-repeat scroll 0 0 transparent;float:right;height:31px;position:absolute;width:26px;}
.light_button a.light_right_nav_first {background:url("images/center.png") repeat-x scroll 0 0 transparent;color:#000;display:inline-block;font-size:16px;font-weight:bold;height:31px;line-height:29px;position:relative;text-align:center;text-decoration:none;}
.light_button a.light_right_nav_first .lout {background:url("images/p_left.png") no-repeat scroll 0 0 transparent;float:left;height:31px;left:-24px;position:absolute;width:24px;}
.light_button a.light_right_nav_first .rout {background:url("images/r_right.png") no-repeat scroll 0 0 transparent;float:right;height:31px;position:absolute;width:26px;}
</style>
</head>
<body>
<div class="light_button">
<div class="left">
<a class="nav_first" href="#">
<span class="lout"></span>
home
<span class="rout"></span>
</a>
</div>
<div class="right">
<a class="light_right_nav_first" href="#">
<span class="lout"></span>
home
<span class="rout"></span>
</a>
</div>
</div>
</body>
</html>
不要将float
和绝对定位结合起来。 在您的情况下,您可能要删除float
并保留position:absolute
。 您已经为.lout
设置了left:-8px;width:8px
,您可以使用right
属性为.rout
做类似的.rout
: right:-26px;width:26px
。
另外,由于左右图像将在实际链接之外,因此您应考虑在链接上添加边距,以使图像不会重叠。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.