У меня есть html-контент, созданный с помощью CSS и заполненный JS. В какой-то момент у меня есть нижний колонтитул с разделителями, связанными с внешними ссылками. В зависимости от контекста количество доступных ссылок может меняться, поэтому я хочу, чтобы нижний колонтитул менял свою ширину по количеству ссылок и показывал горизонтальную полосу прокрутки, когда это необходимо.Горизонтальная полоса прокрутки и ширина авто
Трюк, который я нашел, - это установить контейнер с шириной 200% в нижнем колонтитуле. Однако этот код всегда отображает полосу прокрутки в IE8, когда она отлично работает в Chrome.
Есть ли у вас какие-либо идеи или советы, чтобы полоса прокрутки появлялась только в случае необходимости в IE? Я хотел бы избавиться от ширины на 300% в контейнере, но удаление скрывает ссылки вне экрана ...
Вот кусок кода, я использую:
div#BottomMenu
{
\t width : 99%; \t
\t height: 150px;
\t border-top: 4px solid #E5E5E5; \t
\t overflow-x: auto; \t
\t overflow-y: hidden; \t \t \t
\t
}
div#MenuContainer
{ \t
\t width: 300%; \t
\t padding-left:5px;
\t padding-right:5px; \t \t
}
a.Item
{ \t
\t float: left; \t
\t font-size: 18px;
\t font-family:Helvetica; \t \t
\t font-weight: bold;
\t text-decoration: none; \t
\t text-transform: uppercase; \t
\t color:white;
\t text-align: center; \t \t
\t width: 160px;
\t height: 120px;
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */ \t \t
vertical-align:middle;
\t margin-top: 15px;
\t margin-right: 10px;
\t -moz-box-shadow: 3px 3px 5px #535353;
\t -webkit-box-shadow: 3px 3px 5px #535353;
\t box-shadow: 3px 3px 5px #535353; \t
border: 1px solid #E5E5E5;
\t background-repeat: no-repeat;
}
a.Item:hover
{
\t cursor:pointer;
}<div id="footer">
<div id="MenuContainer">
<a class="Item" id="link1" image:url(./images/Link1.png); background-color: transparent;></a>
<a class="Item" id="link2" image:url(./images/Link1.png); background-color: transparent;></a>
<a class="Item" id="link3" image:url(./images/Link1.png); background-color: transparent;></a>
<a class="Item" id="link4" image:url(./images/Link1.png); background-color: transparent;></a>
<a class="Item" id="link5" image:url(./images/Link1.png); background-color: transparent;></a>
<a class="Item" id="link6" image:url(./images/Link1.png); background-color: transparent;></a>
</div>
</div>