7ion

Пользователь
  • Публикации

    88
  • Зарегистрирован

  • Посещение

Репутация

0 Обычная

О 7ion

  • Звание
    Участник

Информация

  • Пол
    мужской

Посетители профиля

Блок посетителей профиля отключен и не будет отображаться другим пользователям

  1. Вы гений :) Благодаря тому, что вы заюзали transition, клик прилетает в координаты раньше, чем там появится ссылка. Все работает, спасибо!
  2. Вы же поняли, что я не просто так спрашиваю? :) Демо https://jsfiddle.net/0tqgn35L/2/ Зайдите с телефона и попробуйте нажать на текст "Второе предложение". Что произойдет: На span кинется hover Сработает показ ссылки по :hover Клик уйдет в ссылку. ????? Не работает!
  3. Если я буду их убирать-возвращать, ширина <span> будет прыгать. Кроме того, возвращать по какому событию?
  4. Добрый день. Такая задача. В оформлении текста используются невидимые блоки - span.show-on-hover, где color = background-color и где color становится контрастным по .show-on-hover:hover. Вместе с текстом прячутся ссылки и показываются по .show-on-hover:hover a. Всплыла проблема с мобильными пользователями. Чтобы увидеть текст блока, они в него тыкают. Порой они ненароком попадают в невидимую ссылку и тотчас переходят по ней. Нужно чтобы по ссылке невозможно было перейти с первого тапа, первый тап должен только кинуть :hover на .show-on-hover, и только вторым тапом можно тапнуть по ссылке. При этом для пользователей компьютеров все должно быть по-прежнему, никаких кликов для раскрытия. Я смастерил такое: .show-on-hover a { pointer-events: none; } .show-on-hover:hover a { pointer-events: auto; } Не помогает - при тапе по невидимой ссылке .show-on-hover ловит :hover и когда ссылка ловит клик, на ней уже разрешены pointer-events. Это реально решить чистым CSS?
  5. 7ion

    Не могу заставить <button> действовать как inline

    То, как мне нужно - чтобы button работал как span, а не наоборот В этом и суть. -webkit-appearance: button превращает span в неявный inline-block, но если применить -webkit-appearance: none к button, не произойдет ничего! Это просто шикарно. Удивительная история: button по новым стандартам разработчик обязан использовать для активации любой интерактивности, а стилизовать button нельзя. Классно, супер.
  6. Есть span. Если спану задать padding, он вывалится за поля родителя. Если button задать padding, display: inline; border: 0, то за поля родителя кнопка все равно вылезать не хочет. Почему? Демо - https://jsfiddle.net/hmev9p1r/
  7. Вот за 10 постов мы и пришли к тому, откуда начали В итоге решил добавлять блок .fixer на стороне сервера.
  8. Так. Теперь оставьте текста столько, чтобы картинка распирала блок по высоте.
  9. Я благодарен вам за помощь, но вы не понимаете поставленной задачи. Если отредактировать две ваших последних картинки, то должно быть так (красной линией отмечены границы поля): Попробуйте сверстать это в режиме IE7, используя только div и вложенные в него в любом порядке p и img и любой css-код. Любых других подпорочных и распорочных блоков в html-коде быть не должно, иначе бы я просто встраивал класс .fixer из первого сообщения на стороне сервера, а не яваскриптом.
  10. То, что мне нужно получить в итоге - картинку, прибитую к левому верхнему углу без полей вообще, и текст, который отстоит от краев контейнера на 1em и обтекает картинку. Вот так и вот так (все хорошо в ИЕ8): Вот что я получаю в ИЕ7: В вашем примере, как видно, нижнее поле съедается, но даже если починить его с помощью clear:left, то останется точно такое же поле при небольшом тексте, которого нет в ИЕ8: Поэтому ваш пример не помогает, никак, либо я чего-то не понимаю.
  11. Отступ снизу никуда не девается, и в случае вложенного флоата инспектор показывает даже очень забавные картинки. Для сравнения - в режиме IE8 все адекватно.
  12. Мне нужно, чтобы текст обтекал картинку, если его много.
  13. Обеспечиваю тут поддержку IE7 и не могу найти правильных слов для гугла. Примеры типа "добавьте плавающему элементу display: inline либо zoom: 1" не работают. Есть такой код: <div> <img src="http://placekitten.com/200/200?image=6" /> <p>Текст</p> </div> И к нему CSS div { overflow-y: hidden; } img { float: left; } p { margin: 1em; } Если запустить это в любом ИЕ <= 7, у img появится margin-bottom от подследнего вложенного элемента. В IE >= 8 такого бага нет. Смастерил на коленке фикс: .fix { zoom: expression( this.runtimeStyle.zoom="1", this.appendChild( document.createElement("div") ).className="fixer" ); } .fixer { width: 0; height: 0; } Фикс оказался совершенно хрустальным: после первой JS-ошибки экспрешены не работают, а ошибки, увы, есть. Есть способ как-то починить это без экспрешенов? Демо: http://pskovich.ru/garbage/iebug.html (в иешных средствах разработчика выбрать режим IE7).
  14. SelenIT, отлично, именно то, что мне нужно, спасибо! Для сносного результата достаточно поиграть с левыми-правыми padding и margin. https://jsfiddle.net/94br7sed/1/ Очередные грабли. Парсер позволяет получить на выходе пустой <i></i>. Чтобы его не было видно, добавил i:empty { padding: 0; margin: auto; }. Чтобы при вложенных <i> не множились поля, добавил i > i { padding-left: 0; padding-right: 0; margin: auto; }. А вот на <i> с пустым дитём (<i><i></i></i>) ни одно правило не сработает, будет белая палочка https://jsfiddle.net/94br7sed/3/ Всё, решения на CSS нет?
  15. Никаких скриптов, должен быть чистый CSS.