Question

我试图将元素翻译-50％， - 50％。

我的代码如下所示，但它在Firefox和Chrome中的执行方式不同。 Firefox渲染了我想要实现的东西（带有.two类的元素的中心位置），但Chrome只是失去它。

到目前为止我已经想到的是，它可能就是位置：相对但我需要它而不是绝对来计算元素相对于父元素的宽度和高度。

#include <iostream>
#include <vector>

class Base
{
private:
  std::vector<std::string> vars_Base;

protected:
  std::vector<std::string> &get_vars()
  {
    return vars_Base;
  }

public:
  void push_back(const std::string &str)
  {
    get_vars().push_back(str);
  }

  void run()
  {
    for (auto int_vars_it : get_vars())
    {
      std::cout << int_vars_it << " ";
    }
  }
};

class Derived : public Base
{
};

int main(int argc, char *argv[])
{
  Base b;
  b.push_back("aB");
  b.push_back("bB");
  b.push_back("cB");
  b.run(); // prints aB bB cB

  std::cout << std::endl;

  Derived d;
  d.push_back("aD");
  d.push_back("bD");
  d.push_back("cD");
  d.run(); // prints aD bD cD

  return 0;
}

body, html {
  height: 100%; width: 100%;
  margin: 0; padding: 0;
}

.one {
  background: red;
  width: 100%;
  height: 100%; /* for anothet purposes */
  min-height: 30%;
  max-height: 50%;
}

.two {
  background: orange;
  display: inline-block;
  height: 80%;
  width: auto; max-width: 90%;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

Answer 1

这里的问题是容器元素没有明确设置height。是的，它设置了min-height和max-height，但没有设置高度属性。（即使计算出的高度是min-height）

的值

现在top: 50%表示：'将元素向下移动容器高度的50％'，所以：

在Chrome中：top: 50%将内部元素向下移动50％x 0px（容器的设置高度）= 0px然后变换将其向上移动一半自己的高度。

但是，Firefox会将top：50％解释为容器计算高度的50％。

如果您在容器上设置了明确的高度，这也适用于Chrome：

body, html {
  height: 100%; width: 100%;
  margin: 0; padding: 0;
}

.one {
  background: red;
  width: 100%;
  height: 150px; /* for anothet purposes */
  min-height: 30%;
  max-height: 50%;
}

.two {
  background: orange;
  display: inline-block;
  height: 80%;
  width: 80%;
  max-width: 90%;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

<div class="one">
<div class="two">ABC</div>
</div>

在不同的浏览器上翻译（-50％， - 50％）和位置：相对问题

1 个答案: