У меня возникла конкретная проблема, с которой я смог сосредоточиться на определенной структуре, и я не совсем уверен, почему.
Вот ситуация: проектирование сайта, предназначенного специально для iPad, поэтому я делаю большую часть своей разработки в Windows Safari (другие браузеры не имеют значения). Обычно jQTouch создает страницы размером <ul> с <li> элементами для каждого, поэтому мои формы содержат все из них. Особая проблема, с которой я столкнулся, заключается в том, что когда у меня есть блок <ul> вне тега <form>, он отображается правильно (например, он растягивает <ul>, чтобы соответствовать любой высоте, которую занимает его содержимое). Простой способ визуально проверить это - увидеть цвет фона <ul>. Однако всякий раз, когда я помещаю его в тег form, <ul> больше не может определить высоту его содержимого, и Safari назначает его height: 0px (в первом случае ему присваивается количество пикселей, которое вычисляется по его высоты содержимого, == правильно)
Пытался извлечь только важные HTML-теги и CSS-стили в примере - скопировал составной CSS, который Safari применял к каждому тегу, чтобы точно показать, что мое приложение генерирует для всех классов и т. Д., И использует целенаправленно расплывчато селекторы для примера:
CSS:
div {
-webkit-box-flex: 1;
-webkit-box-orient: vertical;
-webkit-transform: matrix(1, 0, 0, 1, 0, 0);
-webkit-user-select: none;
background-color: #DADFE3;
background-image: -webkit-repeating-linear-gradient(left, transparent, transparent 1px, #D4DADF 1px, #D4DADF 7px);
bottom: auto;
display: -webkit-box;
font-family: 'Helvetica Neue', Helvetica;
left: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
min-height: 100%;
overflow-x: hidden;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: absolute;
right: auto;
top: 0px;
width: 1406px;
z-index: 10;
}
form {
-webkit-margin-after-collapse: separate;
-webkit-margin-before-collapse: separate;
-webkit-user-select: none;
bottom: auto;
display: inline-block;
font-family: 'Helvetica Neue', Helvetica;
height: 671px;
left: auto;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: static;
right: auto;
top: auto;
width: 1406px;
}
ul {
-webkit-box-shadow: rgba(255, 255, 255, 0.148438) 0px 1px 0px 0px;
-webkit-margin-after-collapse: separate;
-webkit-margin-before-collapse: separate;
-webkit-user-select: none;
background-color: maroon;
border-bottom-color: #CACFD6;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: #CACFD6;
border-left-style: solid;
border-left-width: 1px;
border-right-color: #CACFD6;
border-right-style: solid;
border-right-width: 1px;
border-top-color: #CACFD6;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-top-style: solid;
border-top-width: 1px;
bottom: auto;
box-shadow: rgba(255, 255, 255, 0.148438) 0px 1px 0px 0px;
color: gray;
display: block;
font-family: 'Helvetica Neue', Helvetica;
font-size: 18px;
font-style: normal;
font-variant: normal;
font-weight: bold;
left: auto;
line-height: normal;
list-style-type: disc;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 10px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: static;
right: auto;
text-shadow: white 0px 1px 0px;
top: auto;
width: 1335px;
clear: both;
}
li {
width: 40%;
float: left;
display: inline-block;
height: 30px;
}
HTML:
<html>
<head>
<title>Test</title>
<style type="text/css">
/* CSS above here */
</style>
</head>
<body>
<div>
<form action="/some/action" method="GET">
<ul>
<li>Some items</li>
<li>Some items</li>
<li>Some items</li>
<li>Some items</li>
<li>Some items</li>
<li>Some items</li>
</ul>
</form>
<ul>
<li>Some items</li>
<li>Some items</li>
<li>Some items</li>
<li>Some items</li>
<li>Some items</li>
<li>Some items</li>
</ul>
</div>
</body>
</html>
Я могу попытаться предоставить больше информации, если это необходимо, но соединение приведенного выше кода в Safari (Win) будет повторять проблему: UL внутри формы не имеет высоты, UL снаружи делает.
Редактировать : Чтобы быстро показать то, что я вижу визуально, я сделал снимок экрана и указал, что я вижу:
Редактировать : По-видимому, в Firefox происходит то же самое. Работал над AJAX и более знаком с расширением Firebug Firefox для этой цели, поэтому я проверил, как оно выглядит в Firefox, и оно тоже там происходит. UL имеет высоту 0, если он не установлен явно.