Пробелы в Firefox
Я использую пользовательскую полосу прокрутки, которая имеет список ul внутри. Когда список ul или содержимое li расширяются, полоса прокрутки расширяется.
Я использовал пробел:nowrap для основного div, так что ширина ul увеличивается, но работает только в chrome, но не работает в firefox/IE и других браузерах.
Вот мой код
<div class="horizontalaccordion">
<ul>
<li>
<h3>Heading 2</h3>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</li>
<li>
<h3>Heading 3</h3>
<div>Content For Panel 3.</div>
</li>
<li>
<h3>Heading 4</h3>
<div>Content For Panel 4</div>
</li>
<li>
<h3>Heading 1</h3>
<div>Content For Panel 1.</div>
</li>
<h3>Heading 3</h3>
<div>Content For Panel 3.</div>
</li>
<li>
<h3>Heading 2</h3>
<div>Content For Panel 2.</div>
</li>
<li>
<h3>test</h3>
<div>Content For Panel sow</div>
</li>
<li>
<h3>Heading 3</h3>
<div>Content For Panel 3.</div>
</li>
<li>
<h3>Heading 4</h3>
<div>Content For Panel 4</div>
</li>
</ul>
</div>
CSS
.horizontalaccordion{
height:auto; width:auto; white-space:nowrap; border-radius:4px !important; background-color: #b6b6b6; margin-right:15px ; height:95px; overflow:hidden
}
.horizontalaccordion>ul {
margin: 0;
padding-left:0;
list-style:none;
height: 95px ; width:auto; display:inline-block
}
.horizontalaccordion>ul>li {
display:block;
overflow: hidden;
float:left;
margin: 0 !important;
padding: 0 !important;
list-style:none;
width:38px;
height: 95px;
/* CSS3 Transitions */
transition: width 0.1s ease-in-out;
-moz-transition: width 0.1s ease-in-out;
-webkit-transition: width 0.1s ease-in-out;
-o-transition: width 0.1s ease-in-out;
}
.horizontalaccordion>ul>li>h3 {
display:block;
margin: 5px 0 0 0;
padding:10px;
height:65px;
width:72px;
border-radius:6px;
box-shadow: 0px -2px 2px #616161;
/* Decorative CSS */
font-family: Arial, Helvetica, sans-serif;
text-decoration:none;
text-transform:uppercase;
color: #000;
background-color: #B3B3B3;
background: -webkit-gradient(linear, 0% 0%, 0% 95%, from(#BEBEBE), to(#B3B3B3));
background: -moz-linear-gradient(top, #BEBEBE 0%, #B3B3B3 95%);
font:bold 12px Myriad Pro, Verdana, Geneva, sans-serif; color:#2c3e52;
/* CSS3 Transform Rotate & Translate */
white-space:nowrap;
-moz-transform: rotate(-90.0deg); /* FF3.5+ */
-o-transform: rotate(-90.0deg); /* Opera 10.5 */
-webkit-transform: rotate(-90.0deg); /* Saf3.1+, Chrome */
transform: rotate(-90.0deg); /* Saf3.1+, Chrome */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3.0)
progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3.0)"
"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)"; /* IE8 */
}
.horizontalaccordion>ul>li>div {
display:none;
float:left;
overflow: auto;
position:relative;
top:-88px;
left:40px;
*top:0px; /* IE7 Hack */
*left:0px; /* IE7 Hack */
margin:0;
width:auto;
height:68px;
padding:10px 50px 10px 10px; white-space:nowrap;
background:#f0f0f0; color:#000;
border-radius:4px;
-webkit-box-shadow: inset 0px 2px 2px #9b9b9b; box-shadow: inset 0px 2px 2px #9b9b9b;
}
.horizontalaccordion>ul>li.hover {
overflow: hidden;
width: auto;
}
.horizontalaccordion>ul>li.hover>div {
display:block;
}
horizontalaccordion>ul>li.hover>h3 {
/* Decorative CSS */
color:#fff;
background:#000000;
/* CSS3 Gradient Effect */
background: -moz-linear-gradient( top, #454545, #000000); /* FF, Flock */
background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000)); /* Safari, Chrome */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)
progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000); /* IE 5.5 - IE 7 */
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)"
"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000)"; /* IE 8 */
}
.horizontalaccordion>ul>li>h3:hover {
cursor:pointer;
/* Decorative CSS */
}
1 ответ
Я настроил ваш код на JS Fiddle, чтобы попытаться понять проблемы немного лучше.
Несколько вещей:
- В вашем HTML-коде отсутствует отверстие
<li>тег, который может ломать вещи. - Для меня поведение выглядит точно так же на Firefox (14) и Chrome (18). Для того, чтобы обойтись без пробелов, даже IE9 работает.
- Без сопровождающего Javascript, я не уверен точно, как вы хотите, чтобы это действовало на аккордеоне.
white-space:nowrap Правило стиля предназначено для предотвращения переноса текста (см. здесь) (и оно успешно делает это в скрипте, с которой я связан), но оно ничего не делает для предотвращения переноса элементов.
Возможно, вы хотите удалить
whitespace: nowrap
и используйте один из них:
overflow-x: visible; /* shows all items even if the area is too small */
overflow-x: scroll; /* Will always show a scrollbar */
overflow-x: auto; /* Will only show a scrollbar when the content doesn't fit */
overflow-x: hidden; /* Content will just drop off the end of the page */
Я надеюсь, это поможет вам. Было бы хорошо, если бы вы могли уточнить, на что именно вы надеетесь. На JSFiddle вы можете изменить положение вещей, обновить его и опубликовать ссылку, если она поможет нам точно понять, что именно вы ищете.