Safari特定CSS无效

Question

所有浏览器都将图像对齐，但Safari正在显示图像展开的位置，而不是靠近中间文本。我实现了一个CSS Safari hack，但没有看到更改。这是正确的方法吗？

附带的图片显示了它在Safari中的样子。外部蓝线是应该更接近文本的图像。

我的HTML看起来像这样：

<img class="blue-accent first-accent" src="images/left.png" />
      <h2>Middle text</h2>
<img class="blue-accent first-accent" src="images/right.png" />

SCSS是这样的：

        .blue-accent {
            width: 100%;
            max-width: 156px;

            align-self: center;
            flex-grow: auto;
            flex-shrink: 1;
        }

        .first-accent {
            order: 1;
            // this is the hack: http://www.fix-css.com/cheat-sheets/css-hacks/
            @media screen and (-webkit-min-device-pixel-ratio:0) {
              #safari {
                padding-left: 30px;
              }
            }
        }

        .second-accent {
            order: 3;
        }