How to solve display:inline-flex CSS property issue in Safari 5.x?

Y

Yuri Yerusalimsky2015-12-21 00:30:09

css

Yuri Yerusalimsky, 2015-12-21 00:30:09

I use the display: inline-flex property , which, as it turned out, does not work in Safari 5 version (I haven’t checked the version before, I don’t see the need for this, I think the situation is the same). There was a desire to include a separate CSS file with different block settings, which is thus displayed crookedly, but the problem is that Google Chrome and Safari are based on the same Webkit engine, which means that all edits for Safari will be automatically processed by Google Chrome. How can this problem be solved? I know about CSS hacks, but so far I haven't found any that work successfully in this version. I also did not find ways to include a separate CSS file separately for Safari 5.x. Please suggest a working solution. Hands down already. :(
Working draft at the link. See the headings there, framed on the left and right with horizontal lines? In Safari, everything is different, the heading slides to the left, in some cases even the lines seem to remain in place, the heading turns to the left and, as it were, is crossed out with a line. In short, this is not the case.
UPD: Removed inline-flex as advised by timfcsm , but now only the line on the right is displayed in Safari! :(

Reply

Answer the question

In order to leave comments, you need to log in

3 answer(s)

R

Rikcon, 2015-12-21
@werber

And why do you actually need Safari 5, which is no longer supported?
This is the latest version 5 for Windows, and the last version for poppies is already 9.
Test on a poppy.
Nobody has been using Windows Safari for a long time.
And in the 5th safari, flexbox didn’t even smell yet.

M

Mechanic, 2015-12-21
@bitrixweb

Well, purely theoretically, you can connect a style file through JS, provided that the user has the necessary user agent. If this is not so critical - just turn a blind eye to this problem. Support for legacy browsers is a dead end. It's like teaching a primitive man to ride a bicycle without a bicycle at hand. If this problem really stands in your throat - change it without flexbox, or, as I said above, connect the file from the user agent and there already tear your soul with a file with !important :)

T

timfcsm, 2015-12-21
@timfcsm

remove float: left from .header_star and .introcond ... in theory, everything will be fine there without flex