不透明度留下1px线

Question

我需要帮助！

我在<div>里面有一个简单的页脚，背景颜色很好。在Safari中，我的过渡淡出了div，左边有一条1px的页脚线，我看到一个像页脚一样的背景颜色的丑陋边框。为什么会这样？怎么避免？

达斯月亮

编辑：

这里的淡入淡出和淡出：

/* Smooth menu and dialog appearance */
.menu, .dialog {
  font-weight: normal;
  z-index: 1;
  -webkit-transition: opacity 1.5s;
  transition: opacity 1.5s;
  opacity: 0.0;
  background: transparent;
  position: absolute;
  left: 50%;
  top: 60%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.dialog {
  top: 50%;
}

/* Focused dialogs and active menus */
.active {
  z-index: 2;
  opacity: 1.0;
}

一些CSS ...：

.dialog header {
  position: relative;
  background: orange;
}

.dialog header h1 {
  display: inline;
  font-size: 1.2em;
  font-weight: bold;
}

.dialog .content {
  padding: 0.4em;
  text-align: left;
}

.dialog footer {
  font-size: 0.8em;
  background: purple;
}

settings.tpl

<div id='settings' class='dialog decorated'>
  <header class='row'>
    <h1>{{ $title }}</h1>
  </header>
  <div class='row content'>
    <label class='dialogentry'>
      {{ $language }}:
      <select id='language' name='language'>
        <option value='de'>{{ $german }}</option>
        <option value='en'>{{ $english }}</option>
        <option value='fr'>{{ $french }}</option>
      </select>
    </label>
    <label class='dialogentry'>
      {{ $resolution }}: <input name='resolution' id='resolution' type='range' min='30' max='50' value='40' step='5' />
    </label>
    <label class='dialogentry'>
      {{ $volume }}: <input name='volume' id='volume' type='range' min='0' max='100' value='50' />
    </label>
  </div>
  <footer class='row'>
    <input type='button' value='{{ $save }}' id='save' onclick='Game.setUp()' />
  </footer>
</div>

Answer 1

疯狂 - 一个简单的overflow: hidden做了伎俩。谢谢大家！