放大时背景图像中出现间隙
我的设计有很多圆形边框，并且必须使用 CSS2.1 进行编码。所以我用 div 进行编码，为它们提供带有尺寸的背景。当浏览器窗口处于正常状态时，设计看起来不错，但是当我放大时，div 之间会出现大约 2px 的间隙。该问题出现在 Chrome 和 Safari 中。
我可以做什么来防止差距？
这是代码示例：
<div id="bigImage">
<div id="leftRoundCorner"></div>
<div id="middlePart"></div>
<div id="rightRoundCorner"></div>
</div>
#bigImage
{
height:20px;
width:20px;
}
#leftRoundCorner
{
height:20px;
width:5px;
float:left;
}
#middlePart
{
height:20px;
width:10px;
float:left;
}
#rightRoundCorner
{
height:20px;
width:5px;
float:right;
}
I have a design with lots of round borders and I have to code with CSS2.1. So I have coded with divs giving them backgrounds with dimensions. The design looks fine when the browser window is in normal state, but when I zoom in about 2px gap appears between the divs. The problem occurs in Chrome and Safari.
What can I do to prevent the gap?
Here is the code example:
<div id="bigImage">
<div id="leftRoundCorner"></div>
<div id="middlePart"></div>
<div id="rightRoundCorner"></div>
</div>
#bigImage
{
height:20px;
width:20px;
}
#leftRoundCorner
{
height:20px;
width:5px;
float:left;
}
#middlePart
{
height:20px;
width:10px;
float:left;
}
#rightRoundCorner
{
height:20px;
width:5px;
float:right;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
对任何圆角使用 CSS3，这样放大后看起来会很好！
<代码>
-webkit边框半径：5px；
-moz-边框半径：5px；
边框半径：5px；
你就完成了！
Use CSS3 for any rounded corners that way it will look fine zoomed in!
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
and you're done!