Моя компания строит веб-сайт, и у нас были некоторые проблемы с библиотекой JavaScript, которая не заменила что-то. Мы решили бросить наш HTML-код в валидатор W3C, и он сообщил нам, что это незаконно иметь тег <div> внутри тега <button>.
<button class="button" type="submit">
<div class="buttonNormalLargeLeft"><!--#--></div>
<div class="buttonNormalLargeCenter">Search Flights</div>
<div class="buttonNormalLargeRight"><!--#--></div>
</button>
Результаты в:
Line 287, Column 46: Element div not allowed as child of element button in this context. (Suppressing further errors from this subtree.)
Изменить: уточнить, что мы пытаемся сделать здесь. Мы хотим сделать кнопку с закругленными углами, которая не полагается на box-radius. Мы сделали 3 divs в элементе кнопки, каждый из которых имеет свой собственный спрайт, чтобы он выглядел закругленным и позволял различную ширину. В других ресурсах указывается, что элемент кнопки был создан для пользователей, которые хотели, чтобы кнопка содержала вспомогательные элементы, такие как изображения, но по какой-либо причине деления оказались некорректными.
Почему divs не допускаются внутри элементов кнопки?
Какое желаемое решение этой проблемы?
Edit2:
Почему бы не использовать ввод? Поскольку входы не могут иметь желаемый макет
Почему бы не использовать div? Поскольку пользователи без JavaScript не смогут отправить форму.
Если вы хотите использовать пользовательскую кнопку, вам придется заменить тег кнопки на div или на вход. Похоже, что div - это то, что вы хотите в этом случае. Вам просто нужно добавить все необходимые обработчики событий (для вашей отправки).
Ну, я написал комментарий, но не люблю.
Вы можете получить действительную кнопку W3C, просто поместив изображение внутри кнопки.
Конечно, вам придется создавать свои изображения и добавлять к ним текст. Но так как вы уже создали изображения для углов, это не должно быть слишком сложно.
Также спрайты изображений - отличная вещь.
.test {
width: 258px;
height: 48px;
background: none;
border: 1px solid transparent;
}
.test:active {
outline: 0;
}
.test > img {
width: 258px;
height: 45px;
opacity: 1;
background: url('http://www.copygirlonline.com/wp-content/plugins/maxblogpress-subscribers-magnet/lib/include/popup1/images/btn/blue-button.png');
background-position: -3px 0px;
}
.test > img:hover {
background-position: -3px -50px;
}<button class="test">
<img src="http://alistapart.com/d/cssdropshadows/img/shadowAlpha.png" />
</button>Если вы используете форму, вместо нее вы можете изменить кнопку, чтобы она была интерактивной. Например:
<div role="button" onclick="$(this).closest('form').submit()">
<!-- your child content here -->
</div>
В качестве альтернативы, если вы знаете имя или идентификатор формы, вы можете изменить встроенный JavaScript на что-то вроде document.getElementById("form-id").submit()