Here is a little test case I've compiled for you:
The font sizes set in this case are as follows:
12px20pxinheritThe hierarchy of the DOM is: container > test element.
When using testEl.currentStyle.fontSize, in IE9, the font size is reported as 12px while displayed as 20px. However, it appears fine in Chrome and FF.
Do you know of any solutions to this problem? Or have I made a mistake somewhere?
Try replacing the use of inherit with font-size: 1em.
The issue with using inherit in IE has been noted. While it appeared fine in IE9, I encountered problems where both testEl.currentStyle.fontSize and $(testEl).css('font-size') returned 12px.
It is suggested that for IE8, specifying a !DOCTYPE may be necessary to employ font-size: inherit, although it should function properly in IE9 (http://www.w3schools.com/cssref/pr_font_font-size.asp). Strangely, testEl.currentStyle.fontSize and $(testEl).css('font-size') do not show the correct values in IE9.
By setting the font-size to 1em, you are adjusting it to 100% of the parent font-size, yielding 20px in this scenario. As explained on http://www.w3schools.com/cssref/css_units.asp:
1em is equivalent to the existing font size. 2em denotes twice the size of the current font. For example, if an element is displayed with a font of 12 pt, '2em' corresponds to 24 pt. The 'em' unit in CSS is beneficial as it can automatically adjust to the reader's chosen font size
Consequently, both computedStyle.fontSize and $(testEl).css('font-size') ought to show 20px.
I trust this information proves helpful!
Having trouble compiling TypeScript to JavaScript when using decorators. A persistent error message I encounter is: app.ts:11:7 - error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the ' ...
As a newcomer to node.js, I'm embarking on the challenge of setting up an application that utilizes Backbone.js on the client-side while being supported by express.js and node.js for server-side extensibility. The lack of online examples showcasing a ...
I'm unsure if this is the correct category, but I'm currently working on developing a file upload website and I would like to implement a virus scan for the uploaded files. How can I go about doing this? Any suggestions on how I can begin this p ...
I've encountered numerous inquiries about modal not displaying, and although I've successfully implemented it in other scenarios, this one presents a unique challenge! In my Wordpress project, I've embedded an Angular app within the admin a ...
After some testing, I found that setting the cursor to cursor: pointer works perfectly fine. However, my goal is to use a custom image as a cursor. The image is saved in both my src and public folders, but I seem to be struggling with the syntax when using ...
I'm looking for the most efficient way to structure a page that involves making Ajax calls. My main issue lies in setting up the event binding for when a user clicks a button. I'm struggling to find a method to pass the ID to the function that t ...
I have a specific case where I am dealing with an array of 500 post IDs and I need to retrieve the first 100 posts. To achieve this, I implemented the following code: API https://github.com/HackerNews/API BASE_URL = 'https://hacker-news.firebaseio.com ...
Situation: I have a container with two direct children, known as "left" and "right". The height of the "left" child should never exceed the height of the "right" child. However, the "right" child can extend beyond the height of the "left" child. I am stru ...
When it comes to websites that handle data asynchronously, the behavior of scroll position restoration upon browser refresh can vary. Sometimes the scroll position is preserved, while other times it is not. For example, when reloading after scrolling down ...
In a certain file, I have a BaseComponent composed of various other components and being exported. The top level of the BaseComponent contains a wrapper responsible for managing margins. When I export it and attempt to override some styles with: //other fi ...
I am trying to dynamically add the "selected" class to a[href] when a specific DIV comes into view while scrolling. However, I want to remove this class completely once the DIV has been scrolled past. const links = $(".cd-faq-categories li a"); // Find al ...
I am currently using moment.js for displaying dates in my application. The date format is determined based on the locale stored in the variable clientLanguage. I have tried various approaches, including the following: moment(myISODate).locale(clientLang ...
I am currently working on setting up a basic stream to read and parse JSON data and then add key-value pairs to a hashtable. My end goal is to create a module that can be utilized in another program, but as I'm troubleshooting, I've hit a roadblo ...
I'm experiencing an issue where the last element in my list is getting cut off. When I check the console logs, I can see that it's rendering properly. If I remove the 'position: fixed' style, I can see the element at the bottom of the l ...
As I work on converting a jquery dragable script to plain javascript, I encountered an issue at the insertBefore point. The error message that pops up is: NotFoundError: Node.insertBefore: Child to insert before is not a child of this node. This particula ...
I am in the process of creating a mini-survey and I want the buttons to change color when clicked, but return to normal when another button is selected within the same question. Currently, clicking on a button turns it red while leaving the others clear. H ...
I am working with a function that requires one parameter: function magical(element){ ... } In my project, I have multiple click handlers attached to different elements and classes that are invoking this function: $('#div1').click(function(){ ...
Hey there! I've encountered an issue with my React client and Express Server. When attempting to send data from the React client to the Express Server, it's not reaching its destination despite trying two different approaches. First Approach: U ...
Having an issue with displaying data from a JSON file using jQuery: { "nombre": "Jesús Ramírez", "edad": "25 Años", "imagen":"file.jpg" } Here's my code: JAVASCRIPT $.getJSON(file.json, function(data) { var name= data.nombre; ...
Struggling with a simple alignment issue in my code and just don't have the time to figure it out. I have two lists, each containing images and text, but I need the text to align to the right of the images instead of wrapping underneath. Here is an ex ...