変更リストタグ(:marker)-IEとSafariホットスポット
応用機器サービスの個人情報処理規定を表示するページ開発が行われている.Unicodeで丸数字(①②③④)を表します. 2 ::marker項目の記号または番号を含むリスト項目のタグボックスを選択します.基本的な 適用例
+)また、@counter-styleも2つのブラウザをサポートしておらず、基本構文のコードを使用して変更する必要があります.
繰り返しEach-List(@each)は最終的に最も基本的なscss構文を返して適用しようとし、リストに必要な文字のUnicodeを加えた.その後@eachでリストを巡り、indexを使用して子供にアクセスする方法. 適用例
+)最初はcontentに
cssが読めないという問題が発生しました.
コードを1つだけ入れました
結果
すべてのブラウザに目的のタグを適用する方法を学びました.😎✌️
リファレンス
https://appdevelopmaster.tistory.com/m/382?category=912939
::marker
を使用して変更されましたが、makrerはクロムで正常に動作していますが、IEとSafariはサポートされていません.::marker MDN Docs <li></li>
ランプを使用する例の1つです.@counter-style circled-numbers {
system: fixed;
symbols: "\2460" "\2461" "\2462" "\2463" "\2464" "\2465" "\2466" "\2467" "\2468" "\2469";
}
...
ul.list-style-circle-number-list {
list-style: none;
counter-reset: circle-counter;
> li.circle-number-item {
counter-increment: circle-counter;
&::marker {
content: counter(circle-counter, circled-numbers) " ";
}
}
}
最初はクロムに応用できると思われていたので、導入しました.ブラウザをチェックすると、IEとSafariはそれらが適用されないことを発見しました.+)また、@counter-styleも2つのブラウザをサポートしておらず、基本構文のコードを使用して変更する必要があります.
繰り返しEach-List(@each)
$obj: "\2460", "\2461", "\2462", "\2463", "\2464", "\2465", "\2466", "\2467", "\2468", "\2469";
...
ul.list-style-circle-number-list {
list-style: none;
@each $ele in $obj {
$index: index($obj, $ele);
> li.circle-number-item:nth-child(#{$index}) {
position: relative;
display: block;
padding-left: 1rem;
&:before {
position: absolute;
left: 0;
content: "#{$ele}";
}
}
}
}
absolute:before要素によって位置が提供されます.+)最初はcontentに
{#ele}
万しか入れていませんでしたcssが読めないという問題が発生しました.
コードを1つだけ入れました
""
を通じて相手にメールを送るべきです.結果
すべてのブラウザに目的のタグを適用する方法を学びました.😎✌️
リファレンス
https://appdevelopmaster.tistory.com/m/382?category=912939
Reference
この問題について(変更リストタグ(:marker)-IEとSafariホットスポット), 我々は、より多くの情報をここで見つけました https://velog.io/@wjd489898/css-리스트-마커-변경하기-marker-IE와-Safari-이슈テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol