Question

我在屏幕的右侧添加了一个标签，但是在Chrome浏览器中查看页面时，该标签大部分在屏幕之外。但是，在Firefox和其他浏览器中，它似乎设置正确了。

两种浏览器的屏幕截图：

Firefox： Chrome：

此外，JS小提琴也显示了此内容：https://jsfiddle.net/gcu6d7qL/1/

我的HTML是：

<a href="#" data-toggle="modal" data-target="#property-alert-modal" id="property-alert-cta" class="property-alert-cta -right u-rounded-4">
    <div>
        <span class="text-uppercase f-bold c-white f-13">Sign up for <span class="f-normal">Property Alerts</span></span>
    </div>
</a>

CSS：

.property-alert-cta.-right {
    right: 0;
}
.u-rounded-4 {
    border-radius: 4px;
}
.property-alert-cta {
    z-index: 2;
    position: fixed;
    top: 30%;
    background: #5b00ff;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 1px;
    padding: 1.5em 0.8em;
}

有人对此有任何修正或建议吗？

谢谢

Answer 1

将锚点包裹在div中：

        <div id="property-alert-cta" class="right">
      <a href="#" data-toggle="modal" data-target="#property-alert-modal" class="property-alert-cta -right u-rounded-4">
        <span class="text-uppercase f-bold c-white f-13">Sign up for <span class="f-normal">Property Alerts</span>
        </span>           
      </a>
    </div>

css：

  body {
    font-family: Arial;
  }
  .right {
      right: 0;
  }
  .u-rounded-4 {
      border-radius: 4px;
  }
  #property-alert-cta {
      z-index: 2;
      position: fixed;
      top: 30%;
  }

  .c-white {
    color: white;
  }

  #property-alert-cta a {
    text-decoration: none;
    background: #5b00ff;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 1px;
    padding: 1.5em 0.8em;
  }

Answer 2

-webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;

用以下代码替换这些CSS代码行。

-webkit-writing-mode: vertical-lr;
    -ms-writing-mode: tb-lr;
    writing-mode: vertical-lr;

Answer 3

在我看来，chrome和safari的 writing-mode：vertical-rl; 固定位置实现存在问题。在您的情况下，一种简单的解决方案是将填充移到封装您的跨度的div上。因为问题是由于铬不能正确补偿垂直放置的元素的填充而引起的。下面是代码：

 .property-alert-cta.-right {
    right: 0;
}
.u-rounded-4 {
    border-radius: 4px;
}
.alert-padding {
 padding: 1.5em 0.8em;

.property-alert-cta {
    z-index: 2;
    position: fixed;
    top: 30%;
    background: #5b00ff;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 1px;
    padding: 1.5em 0.8em;
}

    <a href="#" data-toggle="modal" data-target="#property-alert-modal" id="property-alert-cta" class="property-alert-cta -right u-rounded-4">
    <div class="alert-padding">
        <span class="text-uppercase f-bold c-white f-13">Sign up for <span class="f-normal">Property Alerts</span></span>
    </div>
</a>

Answer 4

这似乎是由于padding引起的。添加right: 1.6em（2x0.8em）时，可以解决Chrome问题。

在这里，我无法告诉您chrome的实现方式有所不同，因为它不取决于div的框大小。

更新在W3规范（https://www.w3.org/TR/CSS2/visuren.html#propdef-position）中，“ right”属性描述如下：

类似于“顶部”，但指定框的右边距边缘向框包含的块的右边缘的左侧偏移多远。对于相对定位的盒子，偏移量是相对于盒子本身的右边缘。

据我了解，即使使用填充，其右边缘也应恰好位于窗口的右边缘。

铬-固定位置

4 个答案: