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

Question

Несколько раз я вижу черную пунктирную границу, например, линию вокруг текста или содержимого при нажатии. Это в основном происходит с 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; 
} 

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

Update:

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

Answer 1

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

outline: 0; 
    border: 0; 

Answer 2

считает <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; 
    }