Кнопка HTML не работает и работает неправильно в Chrome и Firefox

Question

У меня есть дизайн пользовательской кнопки, которую я хочу использовать на своей html-странице, но она не работает

 <a href="@Url.Action("AddCategories/" + Model.Id, "test")">
        <button type="button">
            <a href="#" id="" class="btn">Add new things here</a>
        </button>
    </a>​

вот код для проверки http://jsfiddle.net/YGCWZ/

Пожалуйста, кто-то может помочьмне сделать это. У меня есть еще одна вещь, что Firefox и Chrome оба делают это неправильно.

<a href="/test/AddCategories/1">dfdsf
        </a>
<button type="button"><a href="/test/AddCategories/1">
            </a><a href="#" id="" class="btn">Add new things here</a>
        </button>

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

спасибо

Answer 1

Элемент HTML5 button не должен иметь href как якорную ссылку.Он используется для отправки данных из формы или в виде отдельной кнопки, а не для использования в качестве ссылки.

Если вы используете кнопку только для внешнего вида, я бы придерживался чего-то простого, такого как этот, и стиляон сам в CSS.

<a class="button" href="somewhere.html">My Link</a>

Если вам нужен какой-то JavaScript, то либо привяжите к нему событие в вашей структуре (например, jQuery), либо запустите функцию напрямую, где myFunc должен вернуть false, чтобы избежать поведения ссылки по умолчанию:

<a class="button" href="javascript:myFunc();">My Link</a>

Если вы используете кнопку в form, то вам следует использовать атрибут onclick.Кроме того, я не думаю, что вы должны вкладывать теги привязки.

РЕДАКТИРОВАТЬ:

Для стилевого оформления вы можете использовать это для добавления фоновых изображений и т. Д .:

<style>
* {
    margin: 0;
    padding: 0;
}
.button {
    font: bold 12px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    text-decoration: none;
    background: blue;
    color: white;
    padding: 5px 10px;
    margin: 5px 5px;
    display: inline-block;
}
</style>