AngularJs fails to apply style to dynamic content in IE8 when using HTML5

Question

AngularJs fails to apply style to dynamic content in IE8 when using HTML5

Currently, I am in the process of developing a website with AngularJs and utilizing numerous JS scripts to address compatibility issues with Internet Explorer.

I have organized the data in JSON format, and each page is designed to fetch and display different JSON datasets using ng-repeat and ng-view. However, when using HTML5 tags within the template files, I encountered a problem where IE8 failed to style any elements inside ng-view, even with html5shiv implemented. What steps can I take to resolve this issue?

Experimenting with using div elements instead of section tags yielded working styles, leading me to believe that the problem lies in Angular not properly wrapping new HTML5 tags with innerShiv().

In short, I am becoming increasingly frustrated with dealing with IE compatibility...

javascript jquery css html angularjs

Answer 1

Answer №1

When working with Angular, it's important to refer to the documentation for specific fixes for Internet Explorer. You can find a list of these fixes at: http://docs.angularjs.org/guide/ie

One key fix highlighted in the documentation is to avoid using HTML5 style tags like <ng-view>; instead, use <div ng-view>. Following this guidance has proven successful for me, even when supporting IE8.

Answer 2

When working with Angular, it's important to refer to the documentation for specific fixes for Internet Explorer. You can find a list of these fixes at: http://docs.angularjs.org/guide/ie

One key fix highlighted in the documentation is to avoid using HTML5 style tags like <ng-view>; instead, use <div ng-view>. Following this guidance has proven successful for me, even when supporting IE8.

Answer 3

Answer №2

When working with HTML5 tags, they are rendered as <:tag>. To style a section with the class "content" like so:

section.content{
    background-color: red;
}

You can style it like this:

section.content, \:section.content{
    background-color: red;
}

By doing this, Internet Explorer will eventually apply the style you desire!

Answer 4

When working with HTML5 tags, they are rendered as <:tag>. To style a section with the class "content" like so:

section.content{
    background-color: red;
}

You can style it like this:

section.content, \:section.content{
    background-color: red;
}

By doing this, Internet Explorer will eventually apply the style you desire!

AngularJs fails to apply style to dynamic content in IE8 when using HTML5

Answer №1

Answer №2

Similar questions

An unexpected error occurred: [$injector:modulerr] ngAnimate AngularJS 1.2

The contents of a JSON Object will not be logged by Node, no matter the approach

Utilizing :checked selector and toggle() function in jQuery

Why is it that Lotus Notes is unable to render this HTML code properly?

jQuery has the ability to generate the initial dynamic page prior to running any functions

Converting nested JSON structures from one format to another using JavaScript

Best Practices for Handling Form State in ReactJS with Redux

What is the recommended method for obtaining the maximum suggested number for the y-axis?

Dynamic RSS Aggregator

Adjusting window size when page is resized

`"Error in accessing array index" occurred while trying to retrieve array data for the dataTable jQuery plugin`

A step-by-step guide to summing two numbers within a list using vue.js

Displaying a message text upon successful AJAX request

Remove items from an array using JavaScript

How can I use jQuery to display a larger image in a specific div when a thumbnail is clicked?

How can Vue be used to dynamically alter a string within an input field by incorporating the status of checked checkboxes?

Combining text output using JavaScript, HTML, and Vue

Issues with the styling of HTML code

Creating a dynamic table in AngularJS that can add rows and columns with cyclic values

Hide the div element when the url contains the word 'word'