Search the Community

Компоновка: типичный блок .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-а кверху. Можно, конечно, прилепить его и другими способами, но хотелось бы избежать задания его абсолютной высоты, так как это противоречит концепции адаптивной вёрстки.

Всем привет! Я тут новичок, не пинайте сразу если что. Требуется аналог position sticky для IE (в режиме совместимости с 7). Надо чтобы в одну строку текст с кнопками и с пунктирной линией проходящей под ними посередине в любой ситуации прилипал к левой и правой границе окна, то есть чтобы не участвовал в горизонтальной прокрутке, но прокручивался вертикально. Также при растягивании окна, текст за которым следуют кнопки находились слева на 20%. То есть если сдвинуть скролл, строка с красной полоской должна остатся на месте, если растянуть окно, то красная полоса растягивается, "( Title )" немного сдвигается вправо. Надеюсь более менее объяснил, заранее спасибо. Забыл сказать, таких линий на форме 10 - 20 штук.

Здравствуйте! Проблема следующая: есть некий корпоративный портал (уже довольно древненький и написанный задолго до меня), с него есть обычная ссылка <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 Может где-то в них проблема?

Возникла необходимость сделать слайдер с множественным фоном, в котором по нажатию на кнопку один из фонов меняется. И всё замечательно работало, пока я не решил его проверить в IE11. В Chrome и FireFox всё работает. А в ИЕ фон слайдера либо реагирует на некоторые из кнопок, либо не реагирует на них вообще. В чём же может быть проблема? Код UPD. Забавная штука: если названия изображений, расположенных в списке фонов первыми, различаются между собой, то начинает изменяться и изображение, следующее ниже (которое мне и необходимо менять по нажатию кнопки). Это как-нибудь можно обойти?

Сегодня, 12 января, корпорация Microsoft прекращает поддержку Internet Explorer версий 8, 9 и 10. http://habrahabr.ru/post/274595/ Теперь добавилось формальных оснований не тратить свои драгоценные ресурсы на поддержку не самых лучших браузеров.

Здравствуйте! Решил недавно написать свой framework на подобие jQuery с возможностью удобной выборки селекторов и последующей с ними работы. Все прекрасно получилось и замечательно работает за исключением пары глючных модулей для вкладок и ротации контента. Собственно, проблема заключается в хитроподобном баге Internet Explorer, который до сих пор(тестил в последней версии IE Edge) проглатывания первого элемента массива с указателями на HTML Object'ы документа при попытке переключения z-index элементов прокрутки. Код: // Micro module rotate some contents // [element] :: ( #parents fixed container -> .slide selector ) rotate: function(e,c,t) { var e = this.htmlObj(e); var t = t || 3000; var ind = 0; setInterval(function() { e[ind].rotate = true; e[ind].style.zIndex++; $.callback(c, e[ind]); if(ind++ >= e.length - 1) { for(var i in e) e[i].style.zIndex = 0; ind = 0; }; }, t); },К счастью, все написано в нативном компактном виде и никаких лишних багов быть не может, но при прокрутке элементов первый HTML Object проскакивает цикл как надо, а затем странным образом сглатывается эксплорером и прокрутка прекращается. Во всех остальных браузерах код ведет себя замечательно. // rotations api $.rotate('#presentation p', function(){ //$.log(this); }, 1500);Вот кусок верстки с самими элементами HTML: <div id="presentation"> <p>Evolution JS — это не просто фреймворк и удобное API для скоростной разработки клиентских приложений, но и целый набор вспомогательных модулей с неограниченным потенциалом для творчества.</p> <p>На данный момент внутренний движек и все фильтро-математические функции уже готовы для того, чтобы комфортно писать на JavaScript и не задумываться о сложных вещах, а также самостоятельно разрабатывать ядро Evolution.</p> </div>И сам код CSS для эллеметов: /* rotation */#presentation { border-radius: 8px; position: relative; margin: 20px 0; padding: 12px; height: 90px; width:95%;}#mainContents #presentation p { box-shadow: 0 0 5px #999; background: #FFFFFF; position: absolute; border-radius:8px; padding: 10px; top: 0px;}Кроме прокрутки я также столкнулся с подобным багом IE при создании микромодуля вкладок, который был обнаружен случайно при тестировании поделки: // Micro tabs module // p - control selectors ( like [ul > li] ) // e - switchable contents ( like [div] ) // first .class "active" // transform control [id] to switchable [class] tabs: function(p,e,c) { var e = this.htmlObj(e); var p = this.htmlObj(p); p[0].classList.add('active'); // cleans the active marker var tabActions = function(s,r) { var s = s || 0; for(var t in r) { if( t != s ) { p[t].tabs = true; r[t].tabs = true; p[t].classList.remove("active"); r[t].style.position = 'absolute'; r[t].style.left = '-9999px'; } } }; tabActions(null,e); $.click(p, function(t){ var cur = $.dom('.'+ t.id)[0]; cur.tabs = true; cur.style.position = ''; $.toggleClass(t,"active"); var p = $.stripNum(t.id) - 1; tabActions(p,e); $.callback(c, cur); }); },В тщетных попытках заставить IE корректно комплитить действия с display:none HTML Object я напоролся на вилы. Элемент согласно детализации в консоли браузера выходит из состояния display:none в display: block или display: inline-block, о чем свидетельствует расконсоливание объект.style.display, но эти в наглядной версии элемент продолжает оставаться скрытым и нив какую не возвращается на самом деле. То есть консоль говорит, что изменения произошли, но ничего не изменилось на самом деле. Помимо этого, проблема актуальна только для первого элемента стека. При кликах на последние элементы - все корректно обрабатывается и исчезает, но появляться обратно не хочет. Собственно, из-за ошибок с style.display.none было решено использовать позиционирование элементов в абсолютном смысле для скрытия не совсем здоровым костылем, но и при этом браузер отказался корректно отрабатывать клики по вкладкам: if( t != s ) { p[t].tabs = true; r[t].tabs = true; p[t].classList.remove("active"); r[t].style.position = 'absolute'; r[t].style.left = '-9999px'; }Сам стиль вкладок таков: /* tabs */#tabs,#tabs-2 { text-align: center; list-style: none; margin:15px 0;}#tabs-2 ul,#tabs ul { font-family: Verdana; display: block; width: auto; padding: 0; margin: 0;}#tabs-2 li.tab,#tabs li.tab { border-top: 2px double #4A7BD2; border-radius: 10px 10px 0 0; display: inline-block; border:1px solid #999; margin: 0 0 -1px 0; padding: 7px 15px; background: #999; color: #FDFFFA;}#tabs-2 li.active,#tabs li.active { box-shadow: 0px 0px 5px rgb(148, 148, 148); border-top: 3px double #FFF340; color: #FFF340; }#tabs-2 div,#tabs div { border: 2px solid #999; background: #F4F4F4; border-radius: 4px; text-align:left; }А их код следующий: <div id="tabs-2"><ul> <li id="tbs-1" class="tab">API</li> <li id="tbs-2" class="tab">CSS</li></ul><div class="tbs-1"><code><pre>//tabs engine$.tabs('#tabs-2 li', '#tabs-2 div', function() { $.log(this);});</pre></code></div><div class="tbs-2"><code><pre>/* tabs */#tabs,#tabs-2 { text-align: center; list-style: none; margin:15px 0;}</pre></code></div></div>Для запуска использовано API: //tabs engine $.tabs('#tabs-2 li', '#tabs-2 div', function() { //$.log(this); });Сам фреймворк со всеми используемыми функциями прикладываю во вложении. Помогите пожалуйста побороть ошибки IE и сделать Evo полностью кроссбраузерным. Очень хочется вывести игрушку из beta версии в stable и выложить в internet. Может быть кто-то сможет написать очень компактный аналог или что-то заменить в коде чтобы это стало рабочим в Internet Exploer? скачать примеры: FE framework EVO v.1.2 beta source + API

Добрый день! есть такой сайт. во всех браузерах навигация отображается как нужно в ie все разваливается даже в последней версии. я так понимаю что тут дело не в верстке, а в какой то особенности ie. может у кого то есть идеи как исправить? может что то отключить нужно или наоборот подключить? всем спасибо!

Здравствуйте, ребята. Возникла боль в ИЕ - http://landpage.gezerweb.com/ Сайт-контруктор, там где текст - при клике появляется поле для редактирования. Эта гадость не работает в ИЕ 11. Есть свои косяки и в версиях ниже, но это решаемо с pie.htc. Может быть проблема в лпагине редактирования? Та то он срабатывает, но текста при этом в ИЕ11 нет. Шрифты отсюда - http://fonts.googleapis.com/earlyaccess/alefhebrew.css Думаю, дело в них. Сайт на вордпрессе. Всем шолом и алейхем

Хочу получить такую таблицу. Здесь на сером фоне внутренние белые линии (слева и сверху) Cделать через тень, короткое изящное решение http://jsfiddle.net/aykkwbss/ Работает везде, но как обычно IE в своем репертуаре (думал в 10-й версии глюков с тенью не будет). Здесь белые линии смещены на 1px вправо или вниз Вложил DIV в ячейку. У Мозиллы едет верстка, а IE не растягивает DIV http://jsfiddle.net/aykkwbss/5/ Можно решить без JavaScript?

Ребят, помогите с сайтом. К сожалению поздно додумался проверить его во всех браузерах, в итоге не могу разобраться в чём проблема. Сайт небольшой, писал его в Dreamweaver. По сути это таблица из двух столбцов, в левом лого (с параметром position: absolute), ниже форма заявки. А в правом контент. Ниже этой таблицы футер. На фоне этой таблицы шаблон картинки, которую я потом поменяю. Проблема в том, что в IE (11) и Firefox содержимое левого столбца смещается ниже таблицы. И я не допёр почему. Вот архив с сайтом.

Всем привет. проблема с отображением тега select со своим дизайном. Помогите разобраться как использовать свой дизайн для блока select Вот HTML код: <div><select><option>65x44x16,5</option></select></div>CSS код: div { width:134px; height:25px; background:url(../images/select4.jpg); display:inline-block; z-index:1;}div select { border-radius: 0; background: transparent;; padding: 3px; border: 0; font-size: 14px; line-height: 1; -webkit-appearance: none; cursor:pointer; width:134px; height:25px; z-index:0;}Вот как отображается в Yandex бразуер: Как отображается в IE:

помогите пожалуйста понять почему respond.js не применяется к страничке в IE8 вот работающая страничка от разработчиков respond.js а вот моя, к которой применён тот же самый подход. как видите css из файла в ie8 не срабатывает(должна исчезать правая колонка при определённой ширине окна браузера ). в этом проблема извиняюсь за отсутствие jsfiddle, но для ie8 он глючит

Привет! Есть список, который корректно отображается везде кроме ie. вот скрин http://joxi.ru/LVm6MYzfDMl6rZ . Вот страница http://root.donkos.esy.es/card.html . Уже сломал всю голову. Подскажите как исправить для ie (версии выше 9). Заранее благодарен!

Подскажите, как можно победить svg иконки, на сайте http://delovsite.ru/ в IE. Слева, стоят ссылки-иконки на группы. Стоят там svg. Если сразу не будет видно, то можно чуть уменьшить окно IE. Проблема вроде как известная, https://gist.github.com/larrybotha/7881691, но победить не получилось. Может есть еще какие то варианты? Кроме как заменить на png) Причем первая иконка вроде как отображается нормально:

Доброго времени суток. Подскажите, как решить задачу в IE. Вот ссылка: http://codepen.io/anon/pen/uzHfb - footer с треугольником на CSS3 через псевдотег :before. В Firefox и Chrome под Win7 - всё ок, треугольник по центру, а в IE11 (в младших тоже наверное) - треугольник смещен влево. Та же история (смещен влево) и в Chrome на Android. Заранее благодарю за помощь.

Добрый день. Прошу совета и помощи в решении проблемы. Есть сайт, на котором мне нужно исправить ошибки. Верстал и натягивал его на WP не я, а вот делать исправления, так вышло, что нужно мне. Но дело в том, что с версткой у меня не очень (сам я дизайнер). Вот на этой странице услуг http://www.posadnv.ru/services/ у нас есть схема. При наведении на неё вылезают тултипы, в которых буллетами перечислено содержание услуги. Проблема в том, что эти тултипы не работают в IE. Сделаны они через CSS. В чем загвоздка понять не могу. Так же там есть маппинг, вокруг области полукругов. На самом деле глобально, там не нужен ни маппинг (хватит тултипа и просто на 1 картинке целиком (всего там 4 куска)). Не нужно и точное исполнение имеющего CSS. В принципе этот код можно смело заменить на любой другой вариант тултипа, хоть на javascript хоть на чем угодно. Главное что бы работало, и при наведении на половинку круга появлялся тултип. Но проблема так же и в том, что я не смог найти и адекватной замены, так как очень важным условием - в тултипе должны быть буллеты. Помогите советом. Либо подправить имеющийся код, найти там ошибку, почему в ИЕ не работает. Либо просто найти альтернативу, чтобы работало во всех браузерах.

Добрый день! Сделала свистоперделки 3D-вращалки на CSS: http://beton-art.ru/ (три штуки под большой инфографической картинкой). В IE не работает, даже в в 11-ом... Что ему мешает выводить информацию в тегах <span class="information">? html: <div id="container"> <div class="t-wrapper"> <div class="item"> <img src="images/1.png" width="300px" /> <span class="information" > <strong>ФАСАДНЫЙ ДЕКОР</strong> <br>Мы выполняем все работы по декорированию дома "под ключ" - от 3D проекта до отделки фасада и монтажа декоративных элементов.<br>При заказе бетонных элементов в нашей студии - дизайн-проект бесплатно! </span> </div> </div> </div> css: .item { height: 207px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: -webkit-transform .6s; -moz-transition: -moz-transform .6s; -ms-transition: -ms-transform .6s; -o-transition: -o-transform .6s; transition: transform .6s;} .item:hover { -webkit-transform: translateZ(-50px) rotateX(90deg); -moz-transform: translateZ(-50px) rotateX(90deg); -ms-transform: translateZ(-50px) rotateX(90deg); -o-transform: translateZ(-50px) rotateX(90deg); transform: translateZ(-50px) rotateX(90deg);} .item img { display: block; position: absolute; top: 0; border-radius: 3px; box-shadow: 0px 3px 8px rgba(0,0,0,0.3); -webkit-transform: translateZ(100px); -moz-transform: translateZ(100px); -ms-transform: translateZ(100px); -o-transform: translateZ(100px); transform: translateZ(100px); -webkit-transition: all .6s; -moz-transition: all .6s; -ms-transition: all .6s; -o-transition: all .6s; transition: all .6s; } .item .information { display: block; position: absolute; top: 0; height: 183px; width: 280px; text-align: left; border-radius: 15px; padding: 10px; font-size: 12px; text-shadow: 1px 1px 1px rgba(255,255,255,0.5); box-shadow: none; background: rgb(236,241,244); background: -moz-linear-gradient(top, rgba(236,241,244,1) 0%, rgba(190,202,217,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(236,241,244,1)), color-stop(100%,rgba(190,202,217,1))); background: -webkit-linear-gradient(top, rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%); background: -o-linear-gradient(top, rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%); background: -ms-linear-gradient(top, rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%); background: linear-gradient(top, rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ecf1f4', endColorstr='#becad9',GradientType=0 ); -webkit-transform: rotateX(-90deg) translateZ(100px); -moz-transform: rotateX(-90deg) translateZ(100px); -ms-transform: rotateX(-90deg) translateZ(100px); -o-transform: rotateX(-90deg) translateZ(100px); transform: rotateX(-90deg) translateZ(100px); -webkit-transition: all .6s; -moz-transition: all .6s; -ms-transition: all .6s; -o-transition: all .6s; transition: all .6s;}

Здравствуйте, дамы и господа! Сразу с «жалоб». Уже не первый месяц и не в первом проекте сталкиваюсь с проблемой рендеринга шрифта в IE6-8. Шрифт абсолютно по-разному отображается в IE6-8 и в IE9+/Chrome и т.п. Перечитал массу статей, свожу все к кодировке UTF-8, но больше меня интересует решение данной проблемы. Если кто-нибудь знает ответ или же имеет схожую проблему, добро пожаловать на обсуждение! P.S.: На скриншотах обратите внимание на ширину букв. Шрифт Verdana. https://www.dropbox.com/s/qulo4xj97qcym2u/%D0%A1%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82%202013-12-10%2010.28.22.png https://www.dropbox.com/s/b8vzs3o64ubbve3/%D0%A1%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82%202013-12-10%2010.28.30.png https://www.dropbox.com/s/u4izw4wd7kdie65/%D0%A1%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82%202013-12-10%2010.28.37.png з.ы.: надеюсь администрация простит меня за прямые ссылки =P

Есть сайт http://asiaregion.ru В IE главная страница отображается с такими косяками. Подскажите, пожалуйста, как это исправить.

http://spektr-sb.ru/test2.html - Я уже устал с этим IE... не знаю что делать... еще mozilla походу из за кнопок на странице тормозит жутко, и верхнее меню съезжает. Слево IE, Справа нормальный браузер Chrome. Помогите...

Привет всем! У меня такая проблема: В IE вместо фона отображаются полосы высотой 1 пикс. Причину я знаю - в IE не поддерживается background-size http://jsfiddle.net/kG8x4/ Фулл-скрин:http://jsfiddle.net/kG8x4/show/ Как это исправить?

Всем доброго дня. Интересует почему в браузерах ie 7-9 Не отображается фон дива ( <div class="logo"></div> ) Сайт _liolll.o0.pm

Прислали мне тут ссылочку с "статистикой" http://itc.ua/news/internet-explorer-zanimaet-bolee-55-ryinka-brauzerov/ Считаю, что это какой-то бред, накрутка или просто проплаченная статистика. Кто что думает?

Доброго времени суток уважаемые форумчане. Реализовать text-shadow для статичного текста в ранних IE не проблема, благо есть фильтры, плагины jQuery и техника подложки. Столкнулся с проблемами добавления text-shadow тексту на кнопке и в поле ввода. 1. Кнопка Условия: кнопка с градиентом, тенью и текстом с тенью. Скриншот Попытки: a) Реализовать просто <a>: не универсально при желании использовать input[button], фильтры и плагин jqueryTextShadow создают тень для всего блока <a>, не только текста. б) Реализовать <а><span>text</span></a>: опять же не подходит для input[button] и span блокирует ховеры и клики по кнопке в IE (сделать его прозрачным - не будет текста, сделать z-index - 1 - не будет видно за заливкой). c) Реализовать <span class="button_green"><input type="button" class="action" /><span class="text">Перенесите меня обратно</span><span class="bg"></span></span> .action - прозрачная кнопка или ссылка на всю площадь контейнера с z-index: 10 .text - текст с тенью c z-index: 5 .bg - блока на всю площадь контейнера с заливкой и тенью z-index: 1 Расположение получилось как надо: кнопка с действием наверху, под ней текст с тенью, а под ним заливка. Но! Проблема в реализации ховеров, эктивов и фокусов. .button_green .action:hover + .text + .bg {} не работает нигде .button_green:hover .bg {} не работает в IE, так как .action закрывает собой родителя полностью Больше ломать голову сил нету. Давайте ломать вместе или может есть решение проще, а я упустил. 2. input[type=text], input[type=password] Условия: текст с тенью в IE. Скриншот Попытку реализации еще не сделал: создать поверх div с content editable и необходимым дизайном. по средствам JS синхронизовать изменение текста. Есть ли способ проще? И может быть вообще без JS? Заранее спасибо за ответы.

Добрый день. На сайте транслируется поток с веб камеры в формате mjpeg. Для браузеров ie исользуется cаmbozola, для других браузеров транслируется просто через тег <img src='адрес потока'>. Раньше это было в таком виде: <![if !IE]> <img src="адрес потока" /><br> <![endif]> <!--[if IE]> <applet code="com.charliemouse.cambozola.Viewer" archive="cambozola.jar"> <param name="url" value="адрес потока"/> </applet> <![endif]--> Но для ie 10 это не работает. Подскажите как отделить браузеры ie включая 10 версию от других.