Question

我有一个非常简单的页面：只有一个以页面为中心的标题和下面的几个svg按钮/图标。当你将鼠标悬停在svg上时，它们会变大一些。我注意到当hover转换应用于svg元素时，标题也会移动一点点。我认为这只是Chrome相关的问题，因为我没有注意到与Edge相同（不开玩笑！）。这是可以修复的东西还是我应该在设计页面时考虑到这一点？例如。我不能把header和svg元素放在同一个容器中（当标题不在同一个容器div中时似乎没有不必要的移动）？

body {
    margin: 0px;
    background-color: #ffffff;
}

#svg {
    display: flex;
    justify-content: space-between;
    height: 50px;
    padding-left: 5%;
    padding-right: 5%;
}

.rect {
    fill: #000000;
    fill-rule: evenodd;
    transition: all 0.1s;
    transform-origin: 50% 50%;
}

.rect:hover {
    fill: hotpink;
    fill-rule: evenodd;
    transform: scale(1.1);
}

#header {
    text-align: center;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 80px;
    color: #000000;
}


#container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}


#container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

<!DOCTYPE html>
<html>

<head>
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="css/styles - Copy.css" />
</head>

<body>

    <div id="container">

        <h1 id="header">Header</h1>

        <div id="svg">

            <svg class="rect" xmlns="http://www.w3.org/2000/svg" width="50" height="50">
                <rect width="50" height="50"></rect>
            </svg>

            <svg class="rect" xmlns="http://www.w3.org/2000/svg" width="50" height="50">
                <rect width="50" height="50"></rect>
            </svg>

            <svg class="rect" xmlns="http://www.w3.org/2000/svg" width="50" height="50">
                <rect width="50" height="50"></rect>
            </svg>

            <svg class="rect" xmlns="http://www.w3.org/2000/svg" width="50" height="50">
                <rect width="50" height="50"></rect>
            </svg>

        </div>

    </div>

</body>

</html>

Answer 1

我也可以在Firefox上看到这个问题，它看起来很像一个错误。

修复它相对容易：为div上不断增长的rects保留空间，并将SVG对齐到横轴的中心：

$str = preg_replace_callback('!(\d+( \d+/\d+)?")!',
   function($matches) {

        if(isset($matches[2])){
            $fraction = $matches[2];
            if( strpos( $fraction, '/' ) !== false ) {
                $ints = explode('/', $fraction);
                $fraction = $ints[0] / $ints[1];
            }
        }

      $new  = isset($matches[2]) ? $matches[1] + $fraction : $matches[1];
        $new *= 2.54;
        return $matches[1] . " (" . round($new) . " cm)" . "<br>";
   }
   , $str);

SELECT  top 10  TIMESTAMPDIFF(MINUTE,date('now'),'06.07.2017 10:20:02')

Answer 2

我认为问题在于我使用transform：translate来集中容器div。如果在没有变换的情况下完成居中：翻译，标题中没有不需要的移动。我也在Edge和Firefox中测试了它，它似乎工作正常。

body {
    margin: 0px;
    background-color: #ffffff;
}

#svg {
    display: flex;
    justify-content: space-between;
    height: 50px;
    padding-left: 5%;
    padding-right: 5%;
}

.rect {
    fill: #000000;
    fill-rule: evenodd;
    transition: all 0.1s;
    transform-origin: 50% 50%;
}

.rect:hover {
    fill: hotpink;
    fill-rule: evenodd;
    transform: scale(1.1);
}

#header {
    text-align: center;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 80px;
    color: #000000;
}


#container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 300px;
    height: 100px;
}


#container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

<!DOCTYPE html>
<html>

<head>
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="css/styles - Copy.css" />
</head>

<body>

    <div id="container">

        <h1 id="header">Header</h1>

        <div id="svg">

            <svg class="rect" xmlns="http://www.w3.org/2000/svg" width="50" height="50">
                <rect width="50" height="50"></rect>
            </svg>

            <svg class="rect" xmlns="http://www.w3.org/2000/svg" width="50" height="50">
                <rect width="50" height="50"></rect>
            </svg>

            <svg class="rect" xmlns="http://www.w3.org/2000/svg" width="50" height="50">
                <rect width="50" height="50"></rect>
            </svg>

            <svg class="rect" xmlns="http://www.w3.org/2000/svg" width="50" height="50">
                <rect width="50" height="50"></rect>
            </svg>

        </div>

    </div>

</body>

</html>

SVG转换会影响页面上的其他元素

2 个答案: