| Autor | Zpráva | ||
|---|---|---|---|
| Marek Štafl Profil |
#1 · Zasláno: 11. 2. 2017, 18:04:35
Hezký den,
co jsem se dočetl na internetu, funkce calc() v CSS by měla fungovat v IE od verze 9. Mě to ale nefunguje ani ve verzi 11. Mám něco špatně na tomto zápisu? div.vertical-menu {
position: fixed;
right: 0;
top: 50%;
text-align: left;
transform: translateX(calc(100% - 20pt - 10pt - 10pt)) translateY(-50%); /* EDGE */
transform: translateX(calc(100% - var(--maticnsfsize) - 10pt - 10pt)) translateY(-50%);
transform-origin: center center 0;
transition: all .3s ease;
}V ostatních prohlížečích to funguje. Zkoušel jsem i expression() (ovšem to nevím, jaký je správný zápis), což by údajně měla být náhrada za calc() pro starší prohlížeče, ale taky nic. Děkuji |
||
| pcmanik Profil |
Marek Štafl:
Používaš CSS premenné, ktoré v IE nefungujú. Konzola ti nič nehlási? |
||
| Marek Štafl Profil |
pcmanik:
Nepoužívám, respektive jo, ale proto je tam ten předchozí řádek bez proměnné - v Edge proměnné také nefungují, takže vezme ten první transform a ten druhý ignoruje a jede to. V konzoli v Edge je červeně podtržený jen ten první řádek, v konzoli v IE oba - jediné, co z toho vyčtu je, že je to podle něj špatný zápis, ale už nevyčtu proč. IE: drive.google.com/file/d/0B9t29CVi2taCb2ZLcllKN0JfcjQ/view |
||
| pcmanik Profil |
Marek Štafl:
Bez calc ti to funguje? V tom prípade je očividne problém s tým že staré IE ho nevie použiť vo vnútri inej "funkcie", v tomto prípade translateX. Mimochodom transform funguje az od IE10, v IE9 treba použiť -ms-transform: ... Prípadne by som ešte skúsil tento zápis: transform: translate(calc(100% - 20pt - 10pt - 10pt), -50%);
|
||
| Marek Štafl Profil |
#5 · Zasláno: 11. 2. 2017, 23:09:23
pcmanik:
To je možné, že to nefunguje kvůli tomu, teď jsem si vzpomněl, že tam mám funkci calc() ještě jinde (jako hodnotu top) a tam to funguje, takže to nejspíš nefunguje jen v jiné funkci, jak píšeš (ani ten zápis s translate(x,x) nejde). Zkouším to v IE 11. Asi to budu muset pro IE řešit pomocí JS, což jsem nechtěl. Každopádně díky |
||
| Chamurappi Profil |
#6 · Zasláno: 12. 2. 2017, 14:19:53
Reaguji na Marka Štafla:
„jediné, co z toho vyčtu je, že je to podle něj špatný zápis, ale už nevyčtu proč“ Protože to nepodporuje. „Asi to budu muset pro IE řešit pomocí JS, což jsem nechtěl.“ K čemu potřebuješ calc na sčítání v transformu, když tato vlastnost podporuje více hodnot najednou?
„- 20pt - 10pt - 10pt“ Tohle je translateX(-40pt).
„100%“ Tohle je translateX(100%).
Dát za sebe dva translateX je poměrně triviální, ne? Kdybys chtěl násobit nebo dělit, tak je to složitější (i když nejspíš také řešitelné přes scale).
„Zkoušel jsem i expression() (ovšem to nevím, jaký je správný zápis), což by údajně měla být náhrada za calc()“ Tam se zapisoval JS kód, šířku bys zjistil nejspíš this.offsetWidth, velikost pt bys nijak snadno nezměřil, mohl bys nanejvýš změřit a odečíst pixelovou šířku něčeho jiného. Ale expression už Explorer od verze 11 stejně nepodporuje.
|
||
| Marek Štafl Profil |
#7 · Zasláno: 12. 2. 2017, 16:00:06
Chamurappi:
To jsem nevěděl, že vlastnost transform podporuje zadání více hodnot stejného typu :) Tohle funguje. Díky moc! |
||
|
Časová prodleva: 7 let
|
|||
0