The scaling feature in CSS does not function properly in Internet Explorer 8

I've tried multiple approaches to transform the IE Matrix, but I'm facing an issue with the transform scale CSS not functioning in IE8.

Code:

.fture_box ul li.fture_img img{
width: 451px;
height: 284px;
display: block;
margin: 0 0px 0 11px;
padding: 0px;
float: left;
transform:scale(1.2);
} 

.ie8 .fture_box ul li.fture_img img{
 -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.2, M12=0, M21=0, M22=1.2, SizingMethod='auto expand')";
}

Can anyone provide guidance on how to resolve this compatibility issue in IE8?

htmlcssinternet-explorerinternet-explorer-8

Answer №1

If you're working with Internet Explorer 8, keep in mind that it does not support CCS3 transforms. While incorporating another library may not be ideal, consider exploring velocity.js. This tool utilizes CSS3 when possible and switches to Javascript for older browsers like IE8. Additionally, jQuery is optional and not a requirement.

$.velocity({scale: 1.2});

Answer №2

Unfortunately, CSS transform does not work on IE8.

If you're interested in checking browser support for front-end web technologies on both desktop and mobile browsers, visit http://caniuse.com.

To see the support status of CSS transform specifically, go to http://caniuse.com/#search=transform.

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

Is there a way to hide my jQuery menu?

Can anyone help me figure out how to make it close when I click on a link? <nav class="navigation"> <a href="" class="menuIcon"><i class="fa fa-bars"></i></a> <ul class="nav"> <li class="clearfix"&g ...

jqueryhtmltwitter-bootstrapdrop-down-menumenu

Struggling to create horizontal buttons for my design

Does anyone have any suggestions for fixing my navigation bar? I attempted to create it myself, but I'm struggling to make everything function properly. https://i.stack.imgur.com/h4yA1.jpg Below are the images of the button in all three states: htt ...

cssbuttonnavigationrow

Fontawesome is unable to update the class due to the presence of invalid characters in the string

const toggleDarkOrLight = document.getElementsByTagName('i')[0]; var toggled = false; const toggleFunction = () => { if (toggled === false) { toggleDarkOrLight.classList.remove('fa fa-toggle-off'); toggleDarkOrLight.classLi ...

javascripthtmlcssfont-awesome

Error in Jquery click function not being triggered

I'm in the process of developing an eCommerce platform where users can choose options and have their shopping carts automatically updated using jQuery. Users will be presented with a few radio buttons to select from, and as they make their choice, th ...

javascriptjqueryhtml

Embedding a thread in an HTML document (Difficult task)

I'm currently working on a method to achieve the following task: Embedding a specific string (such as "TEST") into the content of an HTML page, after every certain number of words (let's say 10). The challenge here is ensuring that the word count ...

javascriptjqueryhtml

Tips for integrating scroll-snap and jQuery's .scroll() function together

I'm facing challenges in integrating both of these elements into the same project. When I activate overflow: scroll, my jQuery function does not work as expected. However, if I deactivate it, then the jQuery works but the scroll-snap feature does not ...

jquerycssscroll

Online platform generating printed code

Have you checked out the website here? I'm facing a problem on that site and can't figure out why. I've installed PDO, PHP, httpd, php-mysql, but still unable to resolve the issue. I've even tried reinstalling everything and following ...

phphtmlmysqlapachepdo

Tips for customizing the appearance of material-ui SelectField

Currently, I am utilizing material-ui alongside react with the version "material-ui": "^0.19.2". I am facing an issue while attempting to embed a SelectField inside a table. Although the functionality is working smoothly, there are two unexpected behaviors ...

cssreactjsmaterial-ui

Crosschecking form password with MySQL database for verification

As a newcomer to PHP, I am facing challenges while setting up a login system. My struggle lies in verifying if the password entered in a form matches the corresponding email stored in a MySQL database (considering the email address was also submitted on th ...

phphtmlmysqldatabaseauthentication

Is it Possible to Alter the Title Attribute in AngularJS with ng-class?

My website currently displays an image that updates based on the user's selection from a dropdown menu. The title of the image is set to "test", but I need it to display a different message depending on which image is being shown. Can this be achieved ...

htmlangularjsng-class

Prevent a div from being displaced by the transform property once it reaches the window's border

Is it possible to prevent the viewer I created using CSS transform from moving when its borders reach the window borders? Should I consider using a different method instead? If you'd like to see the code, you can check it out here. var x=0, y=0 ...

javascriptjquerycssbordertransform

Get a Blob as a PNG File

Hope you had a wonderful Christmas holiday! Just to clarify, I am new to JS and may make some unconventional attempts in trying to download my Blob in PNG format. I am facing an issue with exporting all the visual content of a DIV in either PDF or image ...

javascripthtmljquerycssblob

What is the best way to set the value of the days in a month to a div

I've been experimenting with creating a calendar using javascript, HTML, and CSS on my own. I managed to achieve some functionality like obtaining the current month and year as well as the previous month and year by clicking a button in HTML. However, ...

javascripthtmlcssvariables

If you click outside of a Div element, the Div element will close

I am looking for a way to implement a function that will hide a specific div when I click outside of its area. The div is initially set to Position: none and can be made visible using the following function: Div Element: <div id="TopBarBoxInfo1" oncli ...

javascriptjquerycsshtml

Is it possible to customize the background color of select2 boxes separately for each option?

I recently implemented the select2 plugin and now I'm looking to add a new class within the .select2-results .select2-highlighted class in order to change the background color. Does anyone have any suggestions on how to achieve this? ...

javascriptjqueryhtmlcss

Discovering whether input field is currently in focus using jQuery

Does anyone know how to determine if an input tag in HTML has focus using jQuery? The keydown event will function for forms when input, image, etc. tags have focus. However, it will not work if the focus is on the form itself but not on any specific tags ...

javascriptjqueryhtml

When inserting the HTML of a webpage into an iframe, the displayed content may vary slightly from the original page

I am facing an issue with my webpage where I extract the html, transmit it via websockets using socket.io to another page containing an empty iframe, and then inject the html dynamically into the iframe. My code for injecting the html looks like this: fr ...

jquerycssdebuggingnode.jsiframe

Tips for ensuring all my onclick event are clickable in iOS browser

Currently, I am developing a web page using HTML5 and JQuery Mobile. I have encountered an issue where the onclick function does not work on iOS device browsers. Is there a way to change all onclick events to be accessible through tapping instead? This wou ...

javascripthtmljquery-mobile

Ways to implement CSS styling for a particular HTML element

HTML: <div class="tagline">Web Portal Name</div><br /> <div id="logged_in_user_dtls" style="color:#FFF; margin-top:15px; font:bold; width:100%; position:relative; margin-left:800px;float:left;"&g ...

htmlcss

Issue with border radius not applied to input-group in Bootstrap 3

Can anyone explain why the input-group in Bootstrap 3.4 is missing all border radius? <form action="{{ route('dashboard.users.index') }}" method="get"> <div class="input-group"> <input type="text" name="search" class="f ...

csstwitter-bootstrap-3