Question

我无法在所有浏览器中使下面的布局看起来相同：

.wrapper {
  margin-top: 100px;
  position: relative;
  height: 400px;
  width: 400px;
  border: 1px solid black;
}

.icon {
  position: absolute;
  width: 40;
  height: 40px;
  border: 1px solid black;
  background-color: white;
  top: -20px;
  right: 10px;
}

<fieldset class="wrapper">
  <legend>Legendary!</legend>
  <div class="icon">icon</div>
</fieldset>

问题在于，当legend元素存在时，div.icon在firefox上向下拉几个像素，在chrome上向上拉几个像素。当我删除legend元素时，它工作正常，但我不能这样做。关于如何让它在任何地方看起来都一样的想法？

Answer 1

这里你有一个工作更新：jsfiddle在chrome和firefox中测试过。您无需使用position:absolute; float:right;，只需margin-top:-40px;您的div并提供#wrapper{ margin-top: 100px; position: relative; height: 400px; width: 400px; border: 1px solid black; } #icon{ float:right; background-color:#fff; width:40px; height:40px; border:1px solid black; margin-top:-20px; margin-right:20px } legend#title { margin-left: 20px; float: left; padding-left: 10px; margin-top: -10px; background: #f3f5f6; width: 74px; }或您想要的任何值。

language: php
php:
    - '5.6'
    - '7.0'

services:
    - mysql

before_install:
    - php /home/travis/.phpenv/versions/5.6/bin/composer self-update

before_script:
    - composer install
    - php bin/console doctrine:database:create --env=test
    - php bin/console doctrine:schema:create --env=test
    - php bin/console hautelook_alice:doctrine:fixtures:load -n --env=test

script:
    - phpunit --configuration phpunit.xml.dist --coverage-text

Answer 2

 .icon {
           float: right;
           margin-top: -30px;
            width: 40px;
            height: 40px;
            border: 1px solid black;
            background-color: white;


        }

在铬和mozilla上测试。

Answer 3

尝试以top为单位提供%值。

.icon {
                position: absolute;
                width: 40;
                height: 40px;
                border: 1px solid black;
                background-color: white;
                top: -2.5%;
                right: 10px;
            }

在这里小提琴：https://jsfiddle.net/37y8023g/

Answer 4

将line-height用于.icon

CSS：

.wrapper {
    margin-top: 100px;
    position: relative;
    height: 400px;
    width: 400px;
    border: 1px solid black;
}            
.icon {
    position: absolute;
    width: 40;
    height: 40px;
    border: 1px solid black;
    background-color: white;
    top: -20px;
    right: 10px;
    line-height: 40px;
}

工作示例：https://jsfiddle.net/qjqv43y4/1/

带有图例的字段集右上角的位置图标

4 个答案: