Jump to content
  • 0

IE7 не правильно отображается фон блоков


anpolimus
 Share

Question

Здравствуйте все!

В процессе доводки сайта под ИЕ 7 увидел провтык в оформлении комментариев:

Вот как комментарии отображаются в нормальных браузерах:

2013-01-31_2234.png

И как отображается в ИЕ 7:

2013-01-31_2235.png

Насколько я понимаю эксплорер тупит на свойстве background-position.

HTML код фрагмента:


<table class="com_top">
<tr>
<td class="com_avatar">
<div class="user-picture">
<a href="/users/adm1n" title="Информация о пользователе."><img typeof="foaf:Image" src="/sites/default/avatar.png" alt="Аватар пользователя adm1n" title="Аватар пользователя adm1n" /></a> </div>
</td>
<td class="round_cont"><div class="coml"></div></td>
<td class="comc">
<div class="author">
<span rel="sioc:has_creator"><a href="/users/adm1n" title="Информация о пользователе." class="username" xml:lang="" about="/users/adm1n" typeof="sioc:UserAccount" property="foaf:name">adm1n</a></span> </div>
<div class="submitted">
<span property="dc:date dc:created" content="2013-01-30T14:11:54+03:00" datatype="xsd:dateTime" rel="sioc:has_creator">30.01.13 14:11</span> </div>
<div class="comment_links">
<ul class="links inline"><li class="comment-delete first"><a href="/comment/4/delete">удалить</a></li>
<li class="comment-edit"><a href="/comment/4/edit">изменить</a></li>
<li class="comment-reply last"><a href="/comment/reply/53/4">ответить</a></li>
</ul> </div>
</td>
<td class="round_cont"><div class="comr"></div></td>
</tr>
</table>

СSS для данного блока:


.comment .com_top td {padding:0px;height:50px;margin:0px;vertical-align:top;}
.comment .com_top .round_cont {width:5px;}
.comment .com_top .com_avatar {padding-right:10px;width:50px;height:50px;overflow:hidden;}
.comment .com_top .com_avatar .user_picture {display:inline;height:50px;overflow:hidden;line-height:10px;}
.comment .com_top .com_avatar .user-picture a {width:50px;height:50px;display:inline;zoom:1;overflow:hidden;}
.comment .com_top .coml,.comment .com_top .comc,.comment .com_top .comr {height:50px;background:url(/themes/vkk/com_title.png);}
.comment .com_top .comc {position:relative;background-position:0px -100px;}
.comment .com_top .coml {width:5px;background-position:0px 0px;font-size:1px;background-repeat:no-repeat;}
.comment .com_top .comr {width:5px;background-position:0px -50px;font-size:1px;background-repeat: no-repeat;}
.comment .com_top .author {width:100%;font-size:14px;color:#880707;margin-top:8px;margin-bottom:5px;padding-left:5px;height:15px;overflow:hidden;}
.comment .com_top .author a {color:#880707;font-size:14px;}
.comment .com_top .submitted {position:absolute;top:12px;right:2px;height:15px;line-height:14px;font-size:10px;color:#686666;width:50px;text-align:center;display:block;}
.comment .com_top .comment_links {width:100%;margin:0px;}
.comment .com_top .comment_links .links {width:100%;font-size:12px;text-align:left;margin:0px;}
.comment .com_top .comment_links .links ul li {padding:0px;padding-right:5px;}
.comment .submitted a,.comment .links a {color:#686666;text-decoration:none;}
.comment .submitted a:hover,.comment .links a:hover {color:#880707;text-decoration:underline;}
.comment .content,.comment .content p{font-size:12px;margin:5px auto;}

Я использую для данной рамки "данных комментатора" спрайт - картинку а нужный фрагмент вырезаю backrgound-position.

Может кто-то помочь в данной ситуации?

Хотябы показать, в какую сторону рыть.

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

а почему не сделать углы через border-radius?

правда старые ослы не понимают свойств CSS3, но это лечится:

надо скачать .htc файл(его свежую версию), залить на сайт и прописать в стилях


behavior: url(PIE.htc);

Вот статейка по этому поводу

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 Боков Глеб
      Компоновка: типичный блок .Wrapper, который имеет ширину 100% от ширины окна, и центровщик (margin: 0 auto;) с указанными min-width и max-width:
      В IE следующий баг: Wrapper почему-то заканчивается раньше, чем надо, а центровщик с содержимым перекрывает следующую такую же компоновку ниже:

      Такой баг был замечен уже практически на свёрстанном лендинге, а потому было очень трудно сделать минимальный работающий пример. Я постарался убрать весь лишний HTML для данного примера, но CSS тоже самое было сделать очень трудно.
      Если Вы запустите пример в IE (ещё раз повторюсь, что в других браузерах всё нормально), то увидите следующее:

      На StackOverflow уже несколько недель никто не может найти решение (оно и понятно: в разметке-то ошибок нет, это просто баг IE, но с ним надо что-то делать, потому что пользователи IE, увы, ещё превышают критическую отметку 10%). Вот только что удалось выяснить: если контейнеру .FlexPageLayoutWithFixedHeaderAndBottomFooter-Wrapper для основного содержимого (под header) задать min-height вместо height, то отображение станет нормальным. К сожалению, такое решение не годится потому, что исчезнет "прилипание" header-а кверху. Можно, конечно, прилепить его и другими способами, но хотелось бы избежать задания его абсолютной высоты, так как это противоречит концепции адаптивной вёрстки.
    • By serzh82saratov
      Всем привет! Я тут новичок, не пинайте сразу если что.
      Требуется аналог position sticky для IE (в режиме совместимости с 7).
      Надо чтобы в одну строку текст с кнопками и с пунктирной линией проходящей под ними посередине в любой ситуации прилипал к левой и правой границе окна, то есть чтобы не участвовал в горизонтальной прокрутке, но прокручивался вертикально. Также при растягивании окна, текст за которым следуют кнопки находились слева на 20%.

      То есть если сдвинуть скролл, строка с красной полоской должна остатся на месте, если растянуть окно, то красная полоса растягивается, "( Title )" немного сдвигается вправо.
      Надеюсь более менее объяснил, заранее спасибо.
      Забыл сказать, таких линий на форме 10 - 20 штук.
    • By Koss
      Здравствуйте! 
      Проблема следующая: есть некий корпоративный портал (уже довольно древненький и написанный задолго до меня), с него есть обычная ссылка <a> на карту, которая открывается в новой вкладке. Карта нарисована как svg и вставлена непосредственно в саму страницу через тег <svg> (вновь открываемую). Проблема в том, что при переходе по ссылке непосредственно с портала, IE11 не отображает svg и не корректно отображает стили для блоков с текстом. Все остальные браузеры отображают все полностью и правильно. Самое главное, что отдельно (правда на другом веб-сервере [может это важно]) эту страницу с картой IE11 отображает просто замечательно. Но стоит обратиться к ней через ссылку с главной страницы портала, не работает. Предполагаю, что проблема непосредственно с порталом. Где-то какие-то стили не те, или еще что... Может кто поопытнее подскажет, в какую сторону хоть копать...
      При написании портала использованы:      - jquery.fancybox-1.3.4.css
                                                                                                   - AC_RunActiveContent.js
                                                                                                  - swfobject_modified.js
                                                                                                  - jquery-1.4.3.min.js
                                                                                                  - jquery.easing-1.3.pack.js
                                                                                                  - jquery.fancybox-1.3.4.js
                                                                                                  - jquery.fancybox-1.3.4.pack.js
      Может где-то в них проблема?
       
    • By Rumpelstistskin
      Возникла необходимость сделать слайдер с множественным фоном, в котором по нажатию на кнопку один из фонов меняется. И всё замечательно работало, пока я не решил его проверить в IE11. В Chrome и FireFox всё работает. А в ИЕ фон слайдера либо реагирует на некоторые из кнопок, либо не реагирует на них вообще. В чём же может быть проблема?
      Код
       
      UPD. Забавная штука: если названия изображений, расположенных в списке фонов первыми, различаются между собой, то начинает изменяться и изображение, следующее ниже (которое мне и необходимо менять по нажатию кнопки). Это как-нибудь можно обойти?
    • By abrahadabra
      Сегодня, 12 января, корпорация Microsoft прекращает поддержку Internet Explorer версий 8, 9 и 10.
        
      http://habrahabr.ru/post/274595/
       
      Теперь добавилось формальных оснований не тратить свои драгоценные ресурсы на поддержку не самых лучших браузеров.
×
×
  • 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