Jump to content

Search the Community

Showing results for tags 'кроссбраузерность'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Development
    • HTML Coding
    • JavaScript
    • PHP
    • CMS
    • Database
    • Web Server
    • Web-site Development
    • Internet Marketing, SEO
  • Library
    • Tricks and solutions
    • Books
  • Commercial services
    • Freelance
    • Job
    • Goods and Services
  • Our Forum
    • Flame
    • Contests
    • Feedback and Ideas

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Web site


Telegram


Signal


Viber


Skype


From


Interests

Found 10 results

  1. Решил анимировать иконки, нашел пример в интернете, скопировал в Safari Версия 11.0.2 (13604.4.7.1.3), в мобильных Safari и Chrome все отображается отлично но почему-то иконки неправильно отображаются в Chrome Mac (Версия 63.0.3239.132 (Официальная сборка), (64 бит), Chrmoe Windows и Edge - на переднем плане анимированный градиент, а на заднем иконка пример кода пример того как должна выглядеть анимированная иконка во вложении Screen Capture 2018-01-10 06.49.14.mov
  2. http://test1.chpmodul.com.ua/ столкнулся с такой проблемой: сначала сверстал сайт, все было нормально, а потом добавил в него медиа запросы @medai (max-width: 540px) и на интернет эксплорере верстка совсем сломалась. почему это случилось и как исправить?
  3. всем привет. у меня появилась проблема того, что тень текста дико коверкается в сафари и в браузере телефона. неужели этого никак не избежать!? может, есть какие-нибудь решения, ведь наверно же с этим сталкивались многие другие? вот пример, здесь все минимизировано: скришот в разных браузерах: код: <!DOCTYPE html><html><head><meta charset="utf-8"> <title>font</title><style> body{background: #e5e08b;} p{ font-family: arial; color: #ffe; font-weight:bold; text-shadow: 0 0 .1ex #ba0, 0 0 .1ex #870, 0 0 .1ex #870, 0 .7ex .1ex #fff, 2ex 0 .5ex #ffd, -2ex 0 .5ex #ffd; }</style></head><body> <p>Lorem ipsum</p></body></html>вот даже ссылка, если кому интересно. Есть идеи, как правильно обращаться с этой тенью??? или хотя бы как исправить ситуацию в данном случае...
  4. Собственно код .enter {background: url("../img/enter.png"); display: inline-block; width: 170px; height: 42px; position: relative;margin-left: 20px;cursor: pointer; font-family: Arial, sans-serif; font-size: 20px; font-stretch: condensed; font-style: italic; font-weight: bold; color: #7F5B2B; line-height: 42px; text-align: center; text-decoration: none; text-shadow: 1px 2px 3px rgba(255,255,255,0.5); -webkit-background-clip: text; -moz-background-clip: text; background-clip: text;}.enter:hover {background-position: 0 -42px;}.enter:active {background-position: 0 -84px;}<button class="enter" onclick="submit();" type="submit">ВОЙТИ</button><a href="{registration-link}"><div class="enter">РЕГИСТРАЦИЯ</div></a>Проблема в браузерах или в моих кривых руках?
  5. Шрифт 14pt в FF (других браузерах) и Safari - совсем не одно и тоже. В 2 блоках вылезают надписи. Разница разительна. Про сголаживание я вообще молчу. Как решить проблему без костылей?
  6. Доброго времени суток. Задался проблемой соблюдения правил для верстки, не ломающейся при масштабировании в разных браузерах. Хотелось бы качестве результата темы получить что-то вроде набора правил, придерживаясь которых верстка не будет ломаться при масштабировании в последних версиях популярных браузеров. Интересно услышать мнение как экспертов, так и тех кто уже сталкивался с такой проблемой и выработал навык оформления стилей, не дающих ломаться верстке при масштабировании страницы.
  7. На одном ресурсе уже поднимал такую тему, спрошу и у Вас. Хочу поговорить о достижении кроссбраузерности верстки. Все что я пока что верстал - исключительно для себя, т.е. для приобретения практических навыков - на хостинг ничего не заливал, проверял только в новых браузерах. И вот сейчас уже начинаю задаваться вопросом - как достигать профессиональной верстки, с соблюдением всех требований. Вот если говорить о кроссбраузерности, когда читал "Большую книгу CSS" Макфарланда и другие материалы, отмечал какие свойства не работают в определенных версиях IE, где обязательно указание префиксов поставщиков, в каких случаях нужно добавлять zoom: 1, что то в голове отложилось и я это старался исрользовать, но, ясное дело, что то и забылось. Так вот, хотелось бы понять, как работают профессиональные верстальщики. Понятное дело, что спецы с большим опытом знают все явные и неявные проблемы кроссбраузерности и сразу же пишут нужный код не прыгая между браузерами. А что в остальных случаях, неужели у верстальщика открыт с десяток разных браузеров и он по ходу написания кода проверяет результат во всех? Или сначала доводит до готовности верстку в своем "рабочем" браузере, а после этого начинает проверку в остальных? Или может быть все ограничивается проверкой в специальных сервисах, который проверяют твой код и указывают, в каких версиях браузеров могу быть проблемы. Знаю два таких сервиса - http://browserling.com/ и http://browsershots.org/ Правда в функционале их не разбирался. Расскажите, как Вы добиваетесь кроссбраузерности верстки? Всяческие материалы на тему сабжа приветствуются.
  8. Доброго времени суток уважаемые форумчане. Реализовать 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? Заранее спасибо за ответы.
  9. Всем привет, кого не видел. Сделал себе выпадающее меню на основе css по этому уроку. Но, естественно, на мобильных устройства не работает. Нашел урок с адаптивным меню и под мобильные устройства. Но переделывать всё меню лень, может кто подсказать, с чего начать, чтобы меню всплывало и на мобильных устройствах ?
  10. Дело вот в чем, не раз замечаю что в хроме нужно ставить line-height больше чем в других браузерах. К примеру слева FF IE Opera справа Chrome Safari Как справиться с этим? Юзаю хак, но хотелось бы разобратся в причинах такого рендера. И найти более правильное решение. @media all and (-webkit-min-device-pixel-ratio:0) { button.button span span { line-height:29px; } } HTML <button class="button"> <span> <span> Join </span> </span> </button> Извиняюсь за большой CSS - верстаю под magento а там шаблоны не ахти. А менять каждый темплит времени нет. button.button { border:0; padding:0; margin:0; background:transparent; overflow:visible; cursor:pointer; vertical-align:middle; } a.button, button.button > span{ border:0; padding:0 9px; cursor:pointer; display:-moz-inline-stack; display:inline-block; text-decoration:none !important; position:relative; background: #44c8f5; background: -moz-linear-gradient(top, #44c8f5 0%, #1a95bf 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#44c8f5), color-stop(100%,#1a95bf)); background: -webkit-linear-gradient(top, #44c8f5 0%,#1a95bf 100%); background: -o-linear-gradient(top, #44c8f5 0%,#1a95bf 100%); background: -ms-linear-gradient(top, #44c8f5 0%,#1a95bf 100%); background: linear-gradient(to bottom, #44c8f5 0%,#1a95bf 100%); -webkit-border-radius:3px; -moz-border-radius:3px; -ms-border-radius:3px; -o-border-radius:3px; border-radius:3px; } a.button span, button.button span span { display:-moz-inline-block; display:inline-block; white-space:nowrap; text-transform:uppercase; font:13px/25px 'FranklinGothicURW-Dem', Arial, Helvetica, sans-serif; height:24px; color:#fff; }
×
×
  • 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