1

我正在尝试对特定的 div应用边界半径效果。我使用的代码是这样的:

/* Multiple compatibility with border radius */
/* CSS 3 */
border-radius: 50%;
/* Firefox versiones 3.x */
-moz-border-radius: 50%;
/* Safari desde 3.2 hasta la 4 */
-webkit-border-radius: 50%;
/* Khtml Conqueror */
-khtml-border-radius: 50%;

有了这个,我模拟了一个圆圈:D!从那里开始,一切都很好。我写了几行以适应不同的分辨率,但今天我在使用父亲的电脑时发现了一些东西。

我使用的是 22 英寸的全高清屏幕。我父亲有一个 17 英寸的屏幕。我在我的 22 英寸屏幕上尝试了不同分辨率的设计,它们是正确的。但是当我走到我父亲的 17 英寸显示器并打开我的网站时,我的圈子看起来像个鸡蛋!我猜怎么可能!我用我的 22 英寸显示器确保了我的设计,并且所有这些显示器,从 800 x 600 到 1920 x 1080,设计看起来都是正确的。

当然,我立刻想到应该是显示器的宽度。当我使用 % 来定位我的网页时,它使圆圈看起来像鸡蛋。但我不确定改变这个 % 是否会解决这个问题并产生另一个问题,因为我改变了它。

那么,我怎样才能让我的圆圈看起来像不同屏幕英寸的圆圈呢?

谢谢!

编辑:

好的,我编辑了这篇文章,因为它并没有澄清一切。我父亲的分辨率:1024 x 768。我在我的 22 英寸屏幕上试了一下,它看起来很完美。但是当我走到17英寸的屏幕上时,它们又是鸡蛋了!>_<

在这里我粘贴鸡蛋的截图:

鸡蛋! 抱歉,使用工具栏等...

我确保它们在 22 英寸屏幕上看起来像圆圈......

编辑

我将这两个属性都更改为 16%。现在看起来像这样:

新鸡蛋!

现在......我有点迷路了。我想我可能会再次查看我的代码...

4

2 回答 2

3

更新

我从图片中抓取了您的网站地址

您将框的宽度和高度设置为百分比 - 这是包含元素宽度和高度的百分比,因此您只需将浏览器调整为不同的纵横比即可重现此问题。

如果宽度为 16%,并且您更改了浏览器的宽度,则圆圈会变宽但高度将保持不变(您没有将浏览器设置得更高)。

例如

高度:100 像素和宽度:100 像素

  • 100px 的 16% 是 16px 宽
  • 100px 的 8% 是 8px 宽

将浏览器压缩到 100px 高和 50px 宽,你会得到圆圈:

  • 50px 的 16% 是 8px 宽
  • 100px 的 8% 是 8px 高

上一个答案

可能是屏幕分辨率错误,导致屏幕本身被拉伸。

您可以通过查看屏幕上的圆圈图像来测试这一点。如果不是圆形,则问题出在计算机设置中,而不是在您的 CSS 中。

如果圆圈显示正确,您能否将我们指向页面演示或提供更多 HTML 和 CSS 以便我们对其进行测试?造成这种情况的另一个原因是在添加边框半径之前,您的框的大小不是“正方形”。

圆圈

圈子由维基百科提供

于 2012-06-14T15:01:04.627 回答
2

从您的评论来看,您 atm 发生的事情是这样的:http: //jsfiddle.net/7AN3R/2/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <style type="text/css">

.mydiv {
    border:1px solid #000;
    width:8%;
    height:16%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -khtml-border-radius: 50%;
    border-radius: 50%;
    }

    </style>
</head>
<body>
    <div style="width:800px;height:600px;">
    <div class="mydiv">


    </div>
    </div>
</body>
</html>

尝试对圆形 div 的宽度和高度使用相同的百分比。

.circle{
border:1px solid #000;
width:8%;
height:8%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-khtml-border-radius: 50%;
border-radius: 50%;
}
于 2012-06-14T15:02:27.320 回答