Jump to content
  • 0

Странные вещи творятся с изображениями в IE7


Ludwig Voltman
 Share

Question

Я пользуюсь windows XP и время от времени тестирую макеты в IE7. Я уже парочку макетов сверстал и везде одна и та же проблема: почему-то изображения в IE7 отображаются иначе, чем в Firefox, в результате элементы не совпадают. В Firefox такой проблемы нет.

Сделал скриншот:

e0I3mFt.jpg

Вопрос: в чем проблема? Как её решить?

 

Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0

Я пользуюсь windows XP

Как диагноз :)

 

 

Из вашего поста ничего не понять. Продемонстируйте код(часть кода) в любой песочнице(или на бесплатном хостинге).

 

 

В любом случае используйте сборос стилей (normalize, reset). Так же пользуйтесь условными комментариями, чтобы для разных версий ИЕ задавать, собственные стили.

Link to comment
Share on other sites

  • 0

Ну это известная проблема. Можно решить фильтрами, можно скриптами. Могу порекомендовать сайт Dean'a Edwards'a, он написал много хаков, в том числе и для старых IE.

Link to comment
Share on other sites

  • 0

Спасибо за ответы!

Я подумал, что проблема распространенная, поэтому написал кратко. Сейчас подробнее опишу проблему.

Мне нужно вырезать картинку, чтобы вставить её в макет. Я захожу в photoshop, вырезаю картинку и сохраняю её для веб, в формате png 24, без прозрачности. Картинка вот такая:

M5P4LkB.png

Теперь я пипеткой определяю цвет фона картинки и задаю этот цвет как background-color для body.

Код примитивнейший:

<html><head><style>body {background-color: #353a33;}</style><body><img src="logo.png" alt=""/></body></html>

Результат в IE7:

p0P94Ex.jpg

 

В чем проблема и как её решить?

Link to comment
Share on other sites

  • 0

Решил проблему!

Вот полезные ссылки с обсуждениями по теме:

http://www.rsdn.ru/forum/winapi/5023789.flat

http://boulderinformationservices.wordpress.com/2011/02/05/when-png-color-doesnt-match-hex-color-in-ie-smush-it/

Использовал эту ссылку для оптимизации картинок для IE7:

http://www.smushit.com/ysmush.it/

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By gars
      Проблема в следующем верстаю макет с PSD шаблона. Использую HTML и CSS. 
      Прописал по порядку блоки Header. nav. main. в коде html. Добавил картинку и ссылки в блок header. открыл браузер что бы отобразить результат. 
      и вижу. что блок main наехал на блок header.
      Вопрос: почему так получилось. Ведь одно из свойств блочных тегов - они начинаются с новой строки и занимают всю доступную ширину. (main. игнорирует свойство и не начинается с новой строки).  как решить и почему произошло?     Заранее благодарю всех за помощь
      Скрин прикрепляю.   
      HTML
      <body> <header> <div class="logo"> <img src="..\matereal\images\logo.png" alt="logotip" class="logo__img"> </div> <nav> <a href="" class="nav" >home</a> <a href="" class="nav" >compane</a> <a href="" class="nav" >servise</a> <a href="" class="nav" >clients</a> <a href="" class="nav" >contacts</a> </nav> </header> <main> <div> <img src="" class="slaider" alt="slaider"> <p class="slaider__text__h1">веб-разработке\практика</p> <p class="slaider__text__h2"></p> </div> </main> <footer> </footer> CSS
      body { margin: 0; } header { margin: 0; border-top: 3px solid black; } .logo { margin:60,0,60,60; float: left; width: 49%; } nav { float: right; margin: 60,60,60,0; width: 51%; }  

    • By Sergey2510
      https://proverka1.000webhostapp.com/
      На пк сайт отлично работает, а на сервере не запускает css файлы : wp-content/plugins/fullpage172/fullpage/nav/section/filled-circles.css@ver=2.9.2 ; Перерыл весь интернет и не нашел ответа.Помогите )
    • By Brodyaga337
      Почему при указании Font-size: 250px, текст занимает 289px. При верстке использую минифицированную версию Bootstrap 3. Текст отображается неправильно даже вне класса container
      .
    • By almazik2016
      Проблема в  таблицах bootstrap,  то есть таблица выводится вся и с bootstrap делиться на страницы для сокращения и удобства в использование! так вот есть в таблица, и в них, используются ссылки такого вида id (<a id="rank">rank</a>) при клике срабатывает скрипт, на главной странице где по стандарту 10 строк выводит все работает,но стоит перелистнуть страницу перестает работать,(так же с "user-table_length") остальные с помощью bootstrap перенесены на другие стр.. там id click не работает
      пример таблицы, может кто видел

    • By Raiz
      Добрый день!
      Может кто нибудь объяснить мне, не смышленому верстальщику-новичку, как мне выравнить текст по центру картинок?
      Я уже все перепробывал,но что то не клеится((
      на первом скрине я отразил суть проблемы, а на втором то, как это должно быть по макету!
      (я заменил одну картинку, т.к. это не особо важно, но сути это не меняет)
      в html я объединил это все (картинки\текст) в один див и дал ему класс.
      далее я дал класс всем текстовым материалам и ид для каждой картинки, дабы сделать более гибкую настройку, но все пошло не по плану.
       
      в CSS класс текста выглядит так:
      .contenttext {     display: inline-block;     font-family: 'Raleway', Arial, sans-serif;     margin-top: 60px;     font-weight: 500;     font-size: 130%; } Видимо задавать margin-top: 60px; вообще лишнее, по скольку вместе с текстом перемещаются и картинки. Парюсь уже битый час над этим.
      Если кто сможет, подскажите, что можно предпринять для разрешения проблемы.
       


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy