Не работает first-letter в Mozilla Firefox

shim 17.12.2012 firefox, css Все вопросы » Стили (CSS) 4864

вопрос

День добрый!
Вот такая проблемка :

Решил немного украсить шаблон сайтика при помощи CSS3, но столкнулса с проблемой при использовании Псевдоэлемента :first-letter.
И так,что мы имеем

CSS


body{
    background: url(background.png);
}

.wrapper{
    width: 960px;
    overflow: hidden;
    margin: auto;
    padding: 60px 0 100px;
}

.set_item{
    width: 400px;
    float: left;
}

.ramka {
 font: 14px"Trebuchet MS", Georgia, Arial, serif;
  margin: 0px auto;
    width: 80%;
    min-height: 80px;

padding: 10px 10px 10px 10px;
    position:relative;
    background: #f3f3f3;
    background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3));
    background: -moz-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    -webkit-border-bottom-right-radius: 60px 60px;
    -moz-border-radius-bottomright: 60px 60px;
    border-bottom-right-radius: 60px 60px;
    -webkit-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
    box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
    
}

.ramka:before {
    content:'';    
    width: 25px;
    height: 20px;
    position: absolute;
    bottom:0;
    right:0;
    -webkit-border-bottom-right-radius: 30px;
    -moz-border-radius-bottomright: 30px;
    border-bottom-right-radius: 30px;
    -webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
    box-shadow:-2px -2px 5px rgba(0, 0, 0, 0.3);
    -webkit-transform:    rotate(-20deg)
                        skew(-40deg,-3deg)
                        translate(-13px,-13px);
    -moz-transform:    rotate(-20deg)
                    skew(-40deg,-3deg)
                    translate(-13px,-13px);
    -o-transform:    rotate(-20deg)
                    skew(-40deg,-3deg)
                    translate(-13px,-13px);
                    transform:
                    rotate(-20deg)
                    skew(-40deg,-3deg)
                    translate(-13px,-13px);
                    
}

.ramka:first-letter {color: #ff0000;font: italic 24px"Trebuchet MS", Georgia, Arial, serif;
}

html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="style.css" rel="stylesheet" media="all">
</head>
<body>
<div class="wrapper">
    <div class="set_item">
        <div  class="box1">
            <div  class="ramka">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
            ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
            laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
            voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
            non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
        </div>
    </div>
    </div>
</div>
</body>
</html>

Всё это прекрасно отображают все браузеры, кроме Firefox
Возможно ли решить эту проблемку ??

Ответил: BR0kEN

Не зачем для псевдокласса описывать шрифты, если они указаны у родителя - это раз.
Параметр нужно указывать с двумя двоеточиями и обязательно с пробелом перед скобкой - это два.

.ramka::first-letter {
      color:#ff0000;
}

Демо: http://jsfiddle.net/BR0kEN/B4ggj/

Отредактировал 18-12-2012, 11:14 - BR0kEN

Причина: добавил пример

3 комментария

Юзер

shim - 2015-05-1418 декабря 2012 10:16 - #9734

В Firefox это не работает.

.ramka:before {
    если удалить  вот так
    position: absolute;
  тогда псевдоклас заработает, но уже не увидим  часть стиля

Эксперт

235

BR0kEN - 2015-05-1418 декабря 2012 11:00 - #9735

shim, о чем вы вообще? Я написал как будет работать.

Юзер

shim - 2015-05-1418 декабря 2012 11:27 - #9738

Спасиб!!!! с примером более понятно стало )

mondolfo | Шаблон waitlogin при авторизации через с ...

mondolfo
Шаблон waitlogin при авторизации через соцсеть?
Вчера, 01:31

/engine/modules/social.php
TeraMoune | Как изменить вывод custom по нескольким ... ¹¹

TeraMoune
Как изменить вывод custom по нескольким тегам?
28-10-2024, 01:05

Я же написал, продублирую: нужно использовать [[:punct:]]

И проблема в условии проверяющее версию mysql, можно поменять местами true и false, изменить знак меньше на больше или вовсе убрать код строки с version_compare и оставить ту строку кода $tempArray[] где используется [[:punct:]].

В статье также указано, что важно использовать экранирование, собственно, что и указано в методе по исправлению ошибки.
Статья по решению проблемы

Там у человека совершенно другое условие поиска. Он не теги ищет которые строго разделены запятыми, он просто слова ищет и ему как раз подойдёт граница слова. И это когда-то давно поиск был разделяя по границе слова, теперь есть character_class и используется другой метод. Но это не отменяет того, что вы нашли вопрос и решение которое никак не связано с темой новости поиска новостей с наличием тегов.
homa152 | Как изменить вывод custom по нескольким ... ¹¹

homa152
Как изменить вывод custom по нескольким тегам?
27-10-2024, 23:33

Если вы готовы предложить какое-то решение для исправление проблемы 3685, отлично. Иначе к сожалению на последних версиях MySQL хак не рабочий, согласно вашему трактату.
homa152 | Как изменить вывод custom по нескольким ... ¹¹

homa152
Как изменить вывод custom по нескольким тегам?
27-10-2024, 23:20

Я буквально 2 часа назад столкнулся с проблемами при установке этого хака, проблема была именно в ошибке 3685, сайт не просто переставал работать, использовалась стандартная заглушка при критических ошибках MySQL исправить получилось методом описанным выше, для версия до 8 хак работает исправно, но выше, требуется доработка, так как синтаксис считается ошибочным, вы можете проверить самостоятельно.

В статье также указано, что важно использовать экранирование, собственно, что и указано в методе по исправлению ошибки.
Статья по решению проблемы
TeraMoune | Как изменить вывод custom по нескольким ... ¹¹

TeraMoune
Как изменить вывод custom по нескольким тегам?
27-10-2024, 22:32

Напротив нужно использовать [[:punct:]] вместо скобок, про это написано в документации на которую вы ссылаетесь. А \b означает границу слова и не способен правильно отображать результаты. Граница слова это когда выражение будет находить отдельные слова. Например новость имеет теги (Социальная сеть, Блокировка) и tags REGEXP '\\b(сеть)\\b' найдёт новость с тегом Социальная сеть, а так же Рыбацкая сеть и в принципе найдёт все новости где присутствует слово "Сеть" и будет много лишних результатов, а не только нужные.

В хаке как раз присутствует проверка на старую версию и новую mysql и в каждом случае используется тот вариант который является валидным для используемой версии.
homa152 | Как изменить вывод custom по нескольким ... ¹¹
homa152
Как изменить вывод custom по нескольким тегам?
27-10-2024, 21:30
Добавлю касаемо обновления архитектуры MySQL
При добавлении хака с версии MySQL 8.0, возможно появление ошибки: 3685. Неверный аргумент для регулярного выражения.

Можно пофиксить самостоятельно внеся корректировки в сам хак из панели админа.

Строку:
```
$tempArray[] = "tags REGEXP '[[:<:]](" . $value  . ")[[:>:]]'";
```
Заменить на:
```
$tempArray[] = "tags REGEXP '\\\\b(" . $value  . ")\\\\b'";
```
Согласно справочному руководству MySQL 8.0 / ... / Регулярные выражения, «MySQL поддерживает регулярные выражения с помощью международных компонентов для Unicode (ICU)».

То есть, вместо "[[:<:]] и [[:>:]]", нужно использовать: "\b"
vitnet | Есть ли возможность изменить язык сайта? ¹

vitnet
Есть ли возможность изменить язык сайта?
25-10-2024, 16:22

Ну как вариант можно использовать тег {lang text=***} подробнее

{lang text="LANG_PARAMETER"}

Данный тег предназначен для вывода информации из языкового файла website.tpl, который в данный момент используется, где LANG_PARAMETER это значение параметра, который необходимо вывести. Например, тег {lang text="attach_images"} выведет надпись “Прикрепить изображения” из языкового пакета, в случае использования русского языка и если используется английский язык, то “Attach Images”
vitnet | Есть готовый модуль рейтинга комментарие ... ¹
vitnet
Есть готовый модуль рейтинга комментариев?
25-10-2024, 13:12
Вариант 1 (вручную)

1.0 Открываете файл engine/modules/show.full.php находите в нем
```
$where_approve . " ORDER BY " . PREFIX . "_comments.id " . $comm_msort;
```
И меняете здесь id на rating
Пример:
```
$where_approve . " ORDER BY " . PREFIX . "_comments.rating " . $comm_msort;
```
2.0 Затем переходите в админку /admin.php?mod=options&action=syscon --> Настройки комментариев --> Порядок сортировки комментариев --> По убыванию

2.1 Далее --> Тип рейтинга комментариев выставляете "Нравится или Не нравится"

Готово!

Вариант 2 (плагин)
Для просмотра содержимого спойлера, перейдите к выбранному событию.

Graf | Как сделать аякс кнопку "загрузить еще"? ²

Graf
Как сделать аякс кнопку "загрузить еще"?
23-10-2024, 16:03

Вот рабочий пример со скрытие пагинатора и кнопки.
Полный код файла navigation.tpl

[not-available=userinfo]
<div class="nav-load" id="nav-load">[next-link]Загрузить еще[/next-link]</div>

<nav class="navigation"[available=lastcomments] style="padding: 4% 8%;"[/available]>
	<div class="page_next-prev">
		<span class="page_prev" title="Предыдущая страница">
			[prev-link]<svg class="icon icon-left"><use xlink:href="#icon-left"></use></svg>[/prev-link]
		</span>
		<span class="page_next" title="Следующая страница">
			[next-link]<svg class="icon icon-right"><use xlink:href="#icon-right"></use></svg>[/next-link]
		</span>
	</div>
	<ul class="pagination">
		{pages}
	</ul>
</nav>
<script type="text/javascript">
$(document).ready(function(){
    
         $('body').on('click','#nav-load a',function(){
        var urlNext = $(this).attr('href');
        var scrollNext = $(this).offset().top - 200;
        if (urlNext !== undefined) {
            $.ajax({
                url: urlNext,
                beforeSend: function() {
                    ShowLoading('');
                },            
                success: function(data) {
                    $('.navigation').remove();
                    $('#nav-load').remove();
                    $('#dle-content').append($('#dle-content', data).html());
                    $('#dle-content').after($('#bottom-nav'));
                    window.history.pushState("", "", urlNext);
                    $('html, body').animate({scrollTop:scrollNext}, 800);    
                    HideLoading('');
                },
                  error: function() {                
                    HideLoading('');
                    alert('что-то пошло не так');
                  }
            });
        };
        return false;
    });
    
});
</script>
[/not-available]

vitnet | Как перенести категории в DLE? ²

vitnet
Как перенести категории в DLE?
22-10-2024, 11:30

Для начала проверьте наличие файла /engine/cache/system/category.php и если он был до замены БД то удалите его а ещё лучше очистить кеш.

наверх

Не работает first-letter в Mozilla Firefox

Ответил: BR0kEN

3 комментария

Похожие вопросы

Модификация тега hr

как вывести текстовое окно поверх всех картинок

Скрыть ID но не сам блок

Не стабильно передвигается меню

Как обрезать картинку сверху и снизу?

Не выводятся комментарии и форма добавления

не работают подгруженные шрифты

Как ограничить параметр стиля?

Выпадающее меню в шаблоне, как срастить?

Как правильно прописать асоциативный массив + цикл в SCSS?