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 回答