Как избавиться от пунктира в содержании

Иногда я вижу границу с черными точками, например, линию вокруг текста или содержимого при нажатии. В основном это происходит с Firefox. Я безуспешно пытался установить border: none;, чтобы избавиться от него.

кнопка с обновленным кодом. Проблема не решена

Вот пример кода:

<div class="main">
    <div class="sub">
        <button>Show</button>
    </div>
</div>
<span>
    <button  class="styled-button">
         Click
    </button>
</span>

Вот CSS:

button {
    outline: 0;
    border: 0;
    text-decoration:0;
    -moz-outline-style: 0;
}
.styled-button {
    color: #fff;
    background: green;
    height: 36px;
    width: 145px;
    padding: 2px 25px;
    margin: 10px;
    outline: none;
    border: none;
    text-decoration: none;
   -moz-outline-style: none;
}
span {
    outline: 0;
    border: 0;
    text-decoration:0;
}

Может ли кто-нибудь предложить мне исправить это? Почему оно появляется на первом месте?

Обновление:

Я думал, что смогу исправить это в какой-то момент. Но у части моего контента все еще есть проблема, и это в Mozilla Firefox. Я обновил вопрос с кодом. Пожалуйста, проверьте скрипту


css border dotted-line
person Netizen    schedule 17.12.2013    source источник
comment
какой язык вы используете и какой контроль они имеют?   -  person Jade    schedule 17.12.2013
comment
Привет @Jade, обновил детали вопроса. Спасибо!   -  person Netizen    schedule 17.12.2013
comment
outline:none, может быть?   -  person Damaged Organic    schedule 17.12.2013
comment
@IamSJ: JSFiddle было бы неплохо :)   -  person Ali Gajani    schedule 17.12.2013
comment
@AliGajani На самом деле, это было для сайта WordPress. Постараюсь воспроизвести подобное на скрипке и выложить сюда.   -  person Netizen    schedule 17.12.2013
comment
Вы jsfiddle отлично работает для меня   -  person Surjith S M    schedule 27.12.2013
comment
@SurjithSM Можете попробовать в Mozilla Firefox?   -  person Netizen    schedule 27.12.2013
comment
@Gourav Пробовал то же самое на скрипке. Нет успеха.   -  person Netizen    schedule 27.12.2013
comment
Пробовал и на мозилле. Работает отлично. Какую версию вы используете? Последняя версия 26.0   -  person Surjith S M    schedule 27.12.2013
comment
@SurjithSM Используя то же самое - i.imgur.com/f7igUbz.png :). Не знаю, почему это не работает для меня.   -  person Netizen    schedule 27.12.2013

Ответы (2)


arrow_upward
1
arrow_downward

Я сталкивался с подобными проблемами в прошлом, и обычно это был простой трюк, чтобы предотвратить появление этого синдрома пунктирной линии в вашем контенте. Вот как я это делаю:

   outline: 0;
   border: 0;
person Ali Gajani    schedule 17.12.2013
comment
Это работает здесь, это работает и для всех. Похоже, у вас включен какой-то инспектор кода, а вы об этом не знаете. Вы пробовали другую машину? Если его там нет, значит, с вашим кодом как таковым все в порядке. - person Ali Gajani; 27.12.2013
comment
Проверял на трех своих машинах. Как указано в вопросе, у меня нет проблем с браузером Chrome. Но это в файрфоксе. Можете ли вы подтвердить, что он работает на Firefox для вас? - person Netizen; 28.12.2013
comment
Я только что проверил это на моем Firefox. Это также работает. :). Он отображается на всех ваших машинах (FF). - person Ali Gajani; 28.12.2013
comment
Хм, я теперь в замешательстве. Проверил на рабочем месте, там все работает. Но мои два настольных компьютера дома и ноутбук создают эту проблему. Все три компьютера используют Firefox 26.0. Может проблема в аддонах или еще в чем? Проверим это. - person Netizen; 28.12.2013
comment
Приятно видеть, что там это работает, и позвольте мне заверить вас, что это работает и здесь, так что в коде нет ничего плохого. Рад помочь. :) - person Ali Gajani; 28.12.2013

arrow_upward
1
arrow_downward

рассмотреть <a href="#">click</a>

Теперь, чтобы удалить контур, вам нужно применить CSS.

a{
   outline:0;
  }

стиль для любого способа использования ссылки

 a:hover, a:active, a:focus {
     // style it
  }

Для ввода Firefox вы можете попробовать

  input::-moz-focus-inner { 
     border: 0; 
   }

Для IE9 вы можете использовать ниже

     <meta http-equiv="X-UA-Compatible" content="IE=9" />

Вы также можете попробовать для

 a{
    outline: 0;
    outline-style:none;
    outline-width:0;
  }
person Gourav    schedule 27.12.2013
comment
Во всяком случае, я попробовал элемент привязки. Также input::-moz-focus-inner у меня не работает. Вот обновленная скрипта. - person Netizen; 27.12.2013