CSS - various browsers / CSS - Różne przeglądarki 
Autor: Łukasz M.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
Autor
Próbowałem dziś z innym obiektem, który ma rotację i także Edge nie wyświetla go dobrze.
Jakieś sugestie?
Autor
Nikt nie ma żadnego pomysłu? Może KolAsim?
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?
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
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:
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
(It > Pl) ... Próbowałem twojego kodu >> kostki
... nie mam komputera ...
... sprawdź w swoich przeglądarkach ...
cześć, ciao
.
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.
> mobile Android Chrome.76 >> OK!
> PC Vista Chorme.49 >> OK!
> PC Vista Firefox.52.9 >> OK!
... OK ...
.
Autor
Dzięki KolAsim za odpowiedź ale problem został już rozwiązany.
(It > Pl) ... czy to oznacza, że mój przykład online działa...? ...
.
Autor
KolAsim Twój przykład w moich przeglądarkach nie działał poprawnie. Ale mimo tego serdecznie dziękuję za pomoc. :)
... ok! ...