Проблема с неиспользуемым цветом подсветки касания webkit - PullRequest
1 голос
/ 13 октября 2010

У меня проблемы с тем, чтобы свойство -webkit-tap-highlight-color применить к div - я в недоумении, почему это не так.Копирование всех стилей, которые применяются к нему ниже.Желаемый результат - кнопка возврата, как показано здесь: http://building -iphone-apps.labs.oreilly.com / ch03.html # ch03_id35932102

.backButton {
  font-weight: bold;
  text-align: center;
  line-height: 28px;
  color: white;
  text-shadow: rgba(0,0,0,0.6) 0px -1px 0px;
  position: absolute;
  top: 13px;
  left: 6px;
  font-size: 14px;
  max-width: 50px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-width: 0 8px 0 14px;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  -webkit-border-image: url(/static/images/backButton.png) 0 8 0 14;
}
.backButton.clicked {
  -webkit-border-image: url(/static/images/back_button_clicked.png) 0 8 0 14;
}

.toolbar{ 
  background-color: #e1f7ff; 
  -webkit-box-sizing:border-box; 
  border-bottom:1px solid #559D75; 
  padding:10px; 
  height:53px; 
  background-image:-webkit-gradient(linear,left top,left bottom,from(#e1f7ff),to(#a1d2ed)); 
  position:relative; 
  z-index: 70; }

Применяется здесь:

<div class='toolbar'>
    <div class='backButton'>Back</div>
</div>

Просмотр его в имитаторе iPhone (OS 4 включена) и Safari - одна и та же проблема с обоими (подсветка крана все еще отображается).

Заранее спасибо.

Ответы [ 2 ]

4 голосов
/ 04 ноября 2010

Это смущает.Изображение, которое я использовал из примера кнопки «Назад» в Интернете, содержало цвет фона - это не было проблемой со свойством CSS.

Back Button

Я почти смущен, чтобы не публиковать этот ответ, но я готов проглотить свою гордость в надежде помочь другим.Пусть это будет уроком: если вы используете примеры изображений из изображений Google и т. Д., убедитесь, что загружаемая копия выглядит так, как вы ожидаете, .

Я бы хотел вернуть часы, потраченные на отладку, но, может быть, это поможет кому-то еще вернуть их.

Урок усвоен ... полностью.

4 голосов
/ 04 ноября 2010

Попробуйте добавить:

-webkit-user-select: none;
...