在CSS中使用rem作为单位时,缩放在Safari(PC和Mac)中都不起作用.

示例位于http://jsfiddle.net/L25Pz/3/

标记：

<div>
    <img src="http://www.google.com/images/srpr/logo3w.png" />
    <p>Lorem ipsum dolor sit amet</p>
</div>

CSS：

html { font-size:62.5% }

div { background:url(http://www.google.com/images/srpr/logo3w.png); background-size:275px 95px; background-size:27.5rem 9.5rem; background-repeat:no-repeat; }
img { width:27.5rem; height:9.5rem; }
p { font-size:5rem; }

@media only screen and (max-width: 500px) {
    html { font-size:50%;} /* should render everything * 0.8 */
}

…当浏览器窗口宽度超过600px时,在所有浏览器中呈现大小为275px * 95px的图像.此外,在触发媒体查询时,图像和背景会将其宽度和高度调整为220px * 76px.

但是 – 使用Safari,宽度和高度设置为247px * 75px.哪个不是* 0.8,这是别的……

另一方面,段落的字体大小正确呈现：挂钩查询时为40px.

如果你问我,我会感到很奇怪.
有人有解决方案吗？

您需要将-webkit-text-size-adjust设置为none,否则webkit会将字体大小扩展为可读大小：

@media only screen and (max-width: 500px) {
    html { font-size:50%; -webkit-text-size-adjust:none; }  /* should render everything * 0.8 */  
}

当您组合边框半径,填充和边框时,Safari和Mobile Safari似乎有问题.适用于Chrome和Firefox.

< - 预计 < - Safari渲染 HTML：

<img src="http://lorempixel.com/200/200/animals/3/" />

CSS：

img {
    width: 200px;
    height: 200px;
    -webkit-border-radius: 500px;
    -moz-border-radius:    500px;
    border-radius:         500px;
    padding: 3px;
    border: 1px solid #999;
    margin: 10px
}

示例：http://jsfiddle.net/ucNwx/2/

是我的错还是狩猎？我该如何解决？

我敢打赌它是Safari bug：border-radius应用较晚并产生剪辑效果.幸运的是,Box-shadow被正确呈现,所以让我们使用它：

border-radius: 50%;
Box-shadow:
  0 0 0 3px white,0 0 0 4px #999;

在iPad和OS X上的Safari 6上有Works.

我有一个容器,连续占用829px,并具有相同大小的背景图像.

我在该容器中有一个div,它根据829px容器计算其宽度.
在safari上,div的宽度似乎是173.8px,但自从safari / webkit向下舍入后,它被截断并变为173px的宽度.

这个829px容器在同一行有3个div内联.第一个div,1px丢失,第二个,2px丢失,第三个,3个像素丢失,所以第三个div向左移动三个像素.在ipad上,丢失了6个像素.

我试图搜索亚像素渲染问题,并且我已经阅读了john resigs文章和其他一些SO问题,但我无法找到解决方案.

在谷歌上,我发现了一篇文章：http://www.pixafy.com/blog/2013/05/css-subpixel-rendering/#more-310
我试图将它应用到我的情况,但我无法摆脱没有设置容器829px计算的宽度.

我能做什么？

遗憾的是,关于不同的浏览器如何渲染子像素,你无法做很多事情.如果我们可以选择如何通过CSS处理舍入,那将是很好的,但不是.

简单地使用像素而不是百分比可以解决问题,但这显然不是你想要的.如果您通过媒体查询更改值(可能为百分比值),我猜您可以使用静态像素.

每当我发现自己处于类似情况时,我会将最后一个孩子漂浮到右边.最后一个和最后一个元素之间的一些额外像素通常不会伤害最后一个元素与其父元素之间的一些额外像素.

我不能改变选择的高度，所有浏览器工作正常，但Safari不，哪里可以问题？我也尝试make class .style选择，但不工作。

select {
width: 170px; 
height: 25px;
}

尝试添加：

-webkit-appearance: menulist-button;

我有一个网站使用巨大的背景图片(2000×1500)在div容器(100％x 100％)。

当我在iPad上的Safari上打开该网站时，它会按比例缩小(约40％)，比例不同于内容(约80％)。

我将背景移动到一个具有100％宽度和100％高度和溢出设置“隐藏”的div中的img标记。完全一样的发生。

有一个CSS设置，可以帮助Safari缩放背景图像与内容的相同比例？

你应该为iPad创建一个单独的样式表。
您可以使用以下操作：

<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="../ipad.css" type="text/css" />

在此链接上，您将找到有关您的网站在iPad上的方向以及如何处理它的信息。

我的建议是，为您的网站的iPad版本创建一个单独的样式表(css文件)，无论你做什么，你应该创建它，并添加一个链接标签，如上所示。

如果你有一个图片的背景是2000x1500px的iPad版本，你可以减少它适合iPad，如果这是唯一的问题。我想说你应该将图像的大小减少到1024px，并在iPad的单独的样式表中声明它，你会看到最终的结果。

让我知道它怎么回事。

BTW你也应该阅读这篇文章：http://www.inspiredm.com/2010/02/09/ipad-design/