Safari 中的相对定位

Question

Safari 中的相对定位

rom*_*n m 5 css safari positioning cross-browser

它必须很简单，这是我的 CSS：

.progressImage 
{
  position:relative;
  top:50%;
}

.progressPanel
{
height:100%;
width:100%;
text-align:center;
display:none;
}

<asp:Panel ID="pnlProgress" runat="server" CssClass="progressPanel">
<asp:Image ID="Image1" runat="server" CssClass="progressImage" ImageUrl="~/Images/Icons/loading.gif" />
</asp:Panel>

Run Code Online (Sandbox Code Playgroud)

我根据用户操作切换面板显示。

在 FireFox 中运行良好，但在 Safari 中显示在页面顶部。

ps“垂直对齐：中间；” 也不行。

pps 设置“位置：相对；” 面板上的不起作用，设置“position:relative;” 在面板上和“位置：绝对；” 图像上的 FF 会破坏它，并且在 Safari 中不会执行任何操作

这有效：

.progressPanel
{
  height:100%;
  width:100%;
  position:relative;
}

.progressImage
{
  position:absolute;
  top:50%;
  left:50%;
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

Chr*_*org 4

将的位置设置.progressPanel为相对，将的位置设置.progressImage为绝对。以下内容适用于我在 FF、IE、Safari 中。将负边距设置为图像宽度/高度的一半，以实现完美居中。请注意，progressPanel 的某些父级（本例中为 body）需要一个高度，以便 ProgressPanel 可以填充它。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>Test</title>
        <style type="text/css">
        body {
          height:700px;
        }
        .progressImage {
          position:absolute;
          top:50%;
          left:50%;
          margin-left:-16px;
          margin-top:-16px;
        }

        .progressPanel {
          position:relative;
          height:100%;
          width:100%;
          text-align:center;
          background:red;
        }
        </style>
    </head>
    <body>
    <div class="progressPanel"><img class="progressImage" src="pic.jpg"/></div>
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	17 年，2 月前
查看次数：	29223 次
最近记录：	11 年，6 月前