WebSite X5Help Center

 
Łukasz M.
Łukasz M.
User

CSS - various browsers / CSS - Różne przeglądarki  pl

Autor: Łukasz M.
Visited 1288, Followers 1, Udostępniony 0  

Witam mam problem z wyświetlaniem "obiektHTML" w różnych przeglądarkach, najpewniej różnej interpretacji CSS. Z tego co szukałem problem jest stary jak węgiel.

Napisałem kod, konkretnie na sześcian. 

Dobrze się wyświetla:

Desktop: Chrome (Windows, MAC), Firefox

Mobile: Chrome, Iphone (Safari)

Źle się wyświetla:

Desktop: Microsoft Edge, Safari (MAC)

Generalnie w Edge problem występuje przy drugim (BG2) i piątym (BG5) elemencie.

Kombinowałem z rotate w różnych opcjach ale ciągle coś jest nie tak.

Ma ktoś jakiś pomysł?

HTML i CSS w załączniku

-----------------------------------------

Hello, I have a problem with displaying "HTML object" in different browsers, probably different interpretations of CSS. From what I was looking for, the problem is as old as coal.

I wrote the code, specifically for a cube.

It displays well:

Desktop: Chrome (Windows, MAC), Firefox

Mobile: Chrome, Iphone (Safari)

Displayed incorrectly:

Desktop: Microsoft Edge, Safari (MAC)

Generally, in Edge the problem occurs with the second (BG2) and fifth (BG5) elements.

I have combined with rotate in various options but still something is wrong.

Anyone have any idea?

HTML and CSS in attachment

Posted on the
13 ODPOWIEDZI
Łukasz M.
Łukasz M.
User
Autor

Próbowałem dziś z innym obiektem, który ma rotację i także Edge nie wyświetla go dobrze.

Jakieś sugestie?

Czytaj więcej
Posted on the from Łukasz M.
Łukasz M.
Łukasz M.
User
Autor

Nikt nie ma żadnego pomysłu? Może KolAsim?

Czytaj więcej
Posted on the from Łukasz M.
Łukasz M.
Łukasz M.
User
Autor

Znalazłem pewną wskazówkę, mianowicie jak manipulujemy wielkością okna przeglądarki Edge, to sześcian się "naprawia".

Gdzie może leżeć problem?

Czytaj więcej
Posted on the from Łukasz M.
Promise SA
Promise SA
Icm Partner

Witaj Łukasz,

To nie jest problem z obiektem HTML w programie tylko z kodem, który próbujesz w nim umieścić. Umieszczenie na stronie kolejnego kodu z tagami <html> i <body> jest niezgodne ze standardem (dokument HTML może zawierać tylko jeden tag <html> i jeden tag <body>) i prawdopodobnie część, bardziej restrykcyjnych przeglądarek, traktuje to jako błąd.

Taki kod (tj. pełną stronę, z tagami html, body itd.) możesz umieścić np. przy pomocy tzw. pływającej ramki <iframe>.

Ponadto, proszę mieć na uwadze, że dodatkowy kod CSS może kolidować z tym z programu jak również style CSS z programu mogą nadpisywać i zmieniać wygląd i zachowanie elementów, które umieszczasz w elemencie "obiekt HTML". Zawsze w tej sytuacji sugerujemy oznaczenie dodatkowych elementów unikalnymi klasami (class="...") lub identyfikatorami (id="...") i sprawdzenie czy style z programu nie modyfikują tych niestandardowych, dodanych przez Ciebie (pomocne tutaj mogą być narzędzia developerskie dostępne w większości nowoczesnych przeglądarek).

Pozdrawiamy

Czytaj więcej
Posted on the from Promise SA
Łukasz M.
Łukasz M.
User
Autor

Dziekuję za odpowiedź Promise. Dobrze, że ktoś przynajmniej rzucił na to okiem.

Rozumiem oznaczenia class, id etc. Dzięki nim wybrnąłem z problemu, który podnosiłem w tym wątku:

https://helpcenter.websitex5.com/pl/post/219549

---------------------

Wracając do tematu, nie twierdzę, iż jest to problem z "obiektem HTML" bowiem jak napisałem w pierwszym poście, kod działa idealnie na Chrome, Opera, czy też dobrze, lecz trochę inaczej na Firefoxie. Działa dobrze na telefonach z Androidem i trochę inaczej na iPhonach ale też w miarę dobrze.

Kod nie działa tylko na Edge i Safari (Mac).

Tak jak powiedziałem wcześniej sześcian "naprawia się" gdy manipulujemy wielkością przeglądarki Edge.

Kod podałem w całości bowiem testuje go w VSC na wszystkie możliwe konfiguracje. I dalej nie mogę naprawić sześcianu w Edge. 

Może pokażę na screenach w czym jest problem:

CHROME - POPRAWNIE:

EDGE - NIEPOPRAWNIE:

Czytaj więcej
Posted on the from Łukasz M.
Łukasz M.
Łukasz M.
User
Autor

Poza tym nie rozumiem dlaczego Chrome widzi wszystkie ściany sześcianu a Edge tylko pierwszą.

Być może jest to kwestia identyfikatorów, ale to dla czego jak manipulujemy wielkością okna w Edge to sześcian się naprawia?

Chrome

Edge

Czytaj więcej
Posted on the from Łukasz M.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Najlepszy Użytkownik miesiąca FRNajlepszy Użytkownik miesiąca PL
Łukasz M.
Nikt nie ma żadnego pomysłu? Może KolAsim?

(It > Pl) ... Próbowałem twojego kodu >> kostki
... nie mam komputera ...
... sprawdź w swoich przeglądarkach ...


cześć, ciao

.

Czytaj więcej
Posted on the from  ‪ KolAsim ‪ ‪
Łukasz M.
Łukasz M.
User
Autor

KolAsim, niestety Twój kod nie działa poprawnie w żadnej przeglądarce. :(

Nie działa także na telefonie (Android, IOS).

Rotacja jest dobra. Ale brakuje jednej ściany od sześcianu.

Co do przeglądarki Edge problem dalej występuje w tej samej wersji co w moim kodzie.

Przejrzałem MNÓSTWO materiałów w Internecie na temat niezgodności przeglądarek ze standardami CSS. Ale nigdzie w tej kwestii nie mogę znaleźć rozwiązania.

Czytaj więcej
Posted on the from Łukasz M.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Najlepszy Użytkownik miesiąca FRNajlepszy Użytkownik miesiąca PL

> mobile Android Chrome.76 >> OK!
> PC Vista Chorme.49 >> OK!
> PC Vista Firefox.52.9 >> OK!

... OK ...

.

Czytaj więcej
Posted on the from  ‪ KolAsim ‪ ‪
Łukasz M.
Łukasz M.
User
Autor

Dzięki KolAsim za odpowiedź ale problem został już rozwiązany. 

Czytaj więcej
Posted on the from Łukasz M.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Najlepszy Użytkownik miesiąca FRNajlepszy Użytkownik miesiąca PL
Łukasz M.
Dzięki KolAsim za odpowiedź ale problem został już rozwiązany. 

(It > Pl) ... czy to oznacza, że mój przykład online działa...? ...

.

Czytaj więcej
Posted on the from  ‪ KolAsim ‪ ‪
Łukasz M.
Łukasz M.
User
Autor

KolAsim Twój przykład w moich przeglądarkach nie działał poprawnie. Ale mimo tego serdecznie dziękuję za pomoc. :)

Czytaj więcej
Posted on the from Łukasz M.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Najlepszy Użytkownik miesiąca FRNajlepszy Użytkownik miesiąca PL

... ok! ...  

Czytaj więcej
Posted on the from  ‪ KolAsim ‪ ‪