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就能解决问题。谢谢大家！

不透明度留下1px线

1 个答案: