The issue with the flex property in IE9 causing it to malfunction

Here is my CSS:

.flex_web, .flex_tablet, .flex { display: -webkit-box; display: -ms-flexbox; display: flex; }

This code functions properly in Chrome, Safari, and Firefox, but unfortunately does not work in IE9.

I attempted using the display: table property, but it did not yield the desired results.

Currently, I am using AngularJS within Cordova.

I am curious if there are any alternative solutions available for achieving flexibility in IE9.

Your insights and suggestions are greatly appreciated. Thank you!

htmlcssflexboxinternet-explorer-9

Answer №1

IE10+ actually offers support for flex, but it's important to note that IE10 can be quite unreliable as it only adheres to an outdated specification: more details

In contrast, IE11 has less issues and you have the option to find workarounds for some of them through resources like flexhacks

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide to removing a row displayed within a while loop by utilizing a modal popup in PHP and MYSQL

Seeking assistance with PHP, as a beginner I'm struggling to delete a row within a while loop: <?php $sql5 = "SELECT * FROM user_exp WHERE id=".$_SESSION["ID"].""; $result3 = mysqli_query($conn, $sql5); if (mysqli_num_rows($result3) & ...

phphtmlmysql

Creating interactive panorama hotspots with THREE.js SphereGeometry and DOMElements

After creating a WebGL 3D Panorama application using a SphereGeometry, PerspectiveCamera, and CanvasTexture, I am now trying to enhance the scene by adding "HotSpots" over specific areas of the SphereGeometry. However, I am facing difficulty in updating th ...

javascriptcssthree.js

The mobile view is not displaying the footer in full width as expected

I am currently working on designing a website without using the meta viewport tag. My goal is to ensure that my website displays properly on both mobile and desktop devices. I have encountered an issue with the comparison between the home page (index) an ...

htmlcssmeta

Is there a way to make the content overlap the video when I scroll down?

My goal is to create a scrolling effect where the content in the div underneath slowly overlaps the video as I scroll down, similar to the design on the Minecraft homepage. ...

htmlcssbootstrap-4

Angular application with Material Design integration

I've been struggling to implement material design into my angular app, but I'm facing some challenges. After installing material design and adding all the necessary modules to the app.moduel.ts file, the components are not displaying correctly. ...

htmlcssangularjs

Get the title text from a selected div and create an array using JQuery

I'm attempting to gather the text from all divs' Title Attributes and store them in an array, but I'm having trouble finding the correct selection. The title is important because it holds the specific string that I require. Below are three ...

javascriptjqueryhtmlcss

The function defined in the script is not being executed

I encountered an issue in my code. In my script.js file, I have the following function: $(function () { function addColors(basicColors) { ... } }); And in my HTML file: <head> <script src="scripts/script.js"></script> </ ...

javascriptjqueryhtml

Set the alignment of the div to the right side (but not all the way to

I'm currently learning and attempting to create a layout with 4 divs that fits my desired page size, rather than adjusting based on the user's window size. My main struggle is getting the right div to align with the left div, without necessarily ...

csshtmlcss-floatright-align

Make two divs slide to the left on the screen

Looking to animate two divs on the left side. div1 - text content with float left div2 - icons with float left Upon clicking div1, it should move to the left along with the icons. The blue boxes are moving from right to left while the "Follow us" text r ...

jqueryhtmlcss

Using play() in HTML Audio prevents the IOS music player from playing

When developing a timer app, I am currently using html audio to play a beep sound by utilizing the audioElement.play() function. The user must interact with the screen to enable sound (press the unmute button). This particular web application acts as a fit ...

javascripthtmliosreactjsaudio

Tips for hiding the initial value in an HTML Select tag

My HTML Select Program is very basic. By default, it displays "Volvo" as the first value. Is there a way to not display any initial value and allow the user to make a selection? <!DOCTYPE html> <html> <body> <form action="demo_form ...

html

Display HTML content in a modal dialog box without parsing it

I'm currently working on a website showcasing various HTML and CSS spinners and loaders. Each example opens a modal window upon click, where I aim to display the corresponding code for that spinner so users can easily copy and implement it in their ow ...

jqueryhtmlcssmodal-dialog

The excessive offset of pixels is causing the popup dialog to appear misaligned

I'm having an issue with my modal popups where the dialog is rendering 200px to the left and about 100px above its intended position. Just updated jQuery. DevicesRightClickActionsMenuController.prototype.showActionsMenu = function(event) { right ...

javascriptjquerycss

What is the best approach to retrieve checkbox value in Django?

<tr name="item"> <td><input type="checkbox" ></td> <td>>{{ foo }}</td> <td> {{ bar }} </td> </tr> My goal is to have request.POST.getlist('item') in Django views ...

pythonhtmldjangodjango-templates

Enhance Your Map with Bootstrap 4 - Integrate a Unique Theme Color

Is there a way to incorporate a new custom theme color without having to modify the bootstrap variable.scss file directly? I have successfully updated existing colors, but I am struggling to add a completely new theme color using the same method. File st ...

htmlcsstwitter-bootstrapsassbootstrap-4

Unable to eliminate the margin on the right side

I can't seem to get the width of my whole page to stay at 1200px. Every time I set the html or body width to 1200px, Chrome web dev tools shows it as around 1300px with a wide right margin. I've tried adding extra code based on similar posts that ...

htmlcss

Steps for modifying the width of a horizontal line element so that it aligns with an input element

I'm attempting to dynamically adjust the hr element's length based on the length of the input element by using CSS. Additionally, I'd like to incorporate an animation that triggers when the input is focused. I came across a solution for th ...

htmlcss

CSS - How can I position one div on top of another without them overlapping each other?

Hi there! I am having trouble positioning the lower div box next to the upper box with details. I tried using absolute positioning, but it keeps going down for some reason (I set the parent div of all three divs as position relative). Can someone help me f ...

htmlcss

Bootstrap 4's Datetime picker not appearing as expected

I'm currently facing an issue with integrating the EONASDAN datetime picker form into my Bootstrap v4 webpage. The GET form I have contains a lot of data to be submitted. In the demo page provided below, I want users to make selections in each text ...

javascriptjqueryhtmldatetimebootstrap-4

Verify if a string containing only numerical values contains any non-numeric characters

I have an input field for a phone number, but the type is set to text instead of number. I want to validate it if there are any non-numeric characters present, since I have formatted the input to look like this: 123-123-1234 Here is my input: <input (ke ...

javascripthtmljqueryangulartypescript