CSS масштабирование изображений в IE и Firefox - PullRequest
Новая
       39

CSS масштабирование изображений в IE и Firefox

1 голос
/ 31 декабря 2010

У меня странная проблема с форматированием CSS в Internet Explorer и Firefox.Для панели навигации у меня есть несколько изображений, которые я хочу отобразить в столбце с фоновым изображением.Для этого я разместил фоновое изображение на странице, а затем сделал внутри него элемент div для хранения каждой ссылки на изображение и использовал CSS для форматирования каждого изображения.Прекрасно работает в Safari, но в IE и Firefox изображения не масштабируются до размера, необходимого для соответствия фоновому изображению.

Соответствующий CSS с моей страницы находится здесь: 

.nav_background_home{
width:17%;
position:absolute;
left:56%;
top:31%;
z-index:100;}


.nav_background_home .nav_items{
position:absolute;
top:8%;
z-index:150;}


img.nav_item{
margin-bottom:3.75%;
height:4.4%;
margin-left:7%;}

Затем я добавил все в HTML: 

<div class="nav_background_home"><img src="nav_background.png" width=100% />
<div class="nav_items">
    <img src="nav_items/set_design.png" class="nav_item" height=100% />
    <img src="nav_items/company_report.png" class="nav_item" height=100% style="height:4.1%;"/>
    <img src="nav_items/prompt_pages.png" class="nav_item" height=100% />
    <img src="nav_items/characters.png" class="nav_item" height=100% />
    <img src="nav_items/costumes.png" height=100% class="nav_item" style="margin-bottom:2%;" />
    <img src="nav_items/video.png" height=100% class="nav_item" style="height:4.1%;" />

</div>

Это работает безупречно в Safari, но в Firefox и IE изображения не масштабируются.Я уже пытался удалить «height = 100%» из HTML, но это ничего не меняет.Сайт здесь, если это поможет: http://gilmannews.com/rishi/sandbox.html.

Спасибо!

1 Ответ

0 голосов
/ 31 декабря 2010

Это должны быть высота = "100%" и ширина = "100%", попробуйте это запустить.

Кроме того, попробуйте запустить его через http://validator.w3.org/check

Это покажет вам всевиды небольших проблем, которые некоторые браузеры могут хорошо обрабатывать, но другие не будут

...