Applying a box shadow in Internet Explorer that creates a border-like effect of 1

After adding a box shadow to the mark tag for extra spacing on the right and left, I noticed that all browsers except Internet Explorer display it correctly. However, in IE, there is a 1px border-like effect visible. Is there a solution to fix this issue?

mark {
    font-size: 24px ;
    background-color: rgba(0,0,0,0.5);
    line-height: 48px;
    max-width:350px;
    color: #fff;
    -webkit-box-shadow: rgba(0,0,0,0.5) -15px 0 0 0, rgba(0,0,0,0.5) 15px 0 0 0;
    -moz-box-shadow: rgba(0,0,0,0.5) -15px 0 0 0, rgba(0,0,0,0.5) 15px 0 0 0;
    box-shadow: rgba(0,0,0,0.5) -15px 0 0 0, rgba(0,0,0,0.5) 15px 0 0 0;
}
<mark>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</mark>

htmlcss

Answer №1

<style>
  mark {
    font-size: 24px ;
    line-height: 48px;
    max-width:350px;
    color: #fff;
    background-color: rgb(68,68,68); /* Needed for IEs */
    -moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
    -webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
    box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
    -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
    zoom: 1;
   }
</style>

<mark>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</mark>

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

Achieving Vertical Alignment in a Bootstrap 4 Image Overlay Card

I am facing a challenge in trying to vertically center a FontAwesome icon within an Image Overlay Card. Despite attempting various methods like using d-flex and justify-content-center, none of them seem to be effective. What could I be overlooking? < ...

htmlcssbootstrap-4overlayvertical-alignment

What is the best way to adjust the size of an SWF object using a Blueprint CSS span range?

Utilizing Blueprint CSS, I am crafting a 3 column layout: LEFT COLUMN: span-6 CENTER COLUMN: span-12 RIGHT COLUMN: span-6 Within the center column, I aim to insert an SWF object that requires a predetermined size upon setup: swfobject.embedSWF(url, "fla ...

javascriptjquerycssflashblueprint-css

Ensure that the Bootstrap 4 navbar remains fixed at the top of the page while maintaining

Currently, the only method I have found to maintain a transparent navbar is by setting it to fixed-top like this: <nav class="navbar fixed-top navbar-inverse"> <!-- more html --> </nav> This can be seen here. I am looking for a way ...

csstwitter-bootstrapangularbootstrap-4

What methods can be used to authenticate the user's input?

I am facing an issue with my program where it breaks if there is a space behind the last number entered. I want to prevent the function from breaking when a space is entered. I tried using $.trim but couldn't get it to work. I also attempted using an ...

javascripthtml

Utilizing JavaScript to dynamically set a CSS file from an API in AngularJS

I am currently facing an issue with integrating a CSS file returned by an API into my entire website. Since the URL of the CSS file keeps changing, hard coding the URL is not feasible. While I have successfully implemented this on 'view1', my goa ...

javascripthtmlcssangularjs

Choose the appropriate sprite based on the calculated result

I have a PNG file with 30 sprites in it. After converting it into CSS using , I am facing an issue with my JavaScript code. The script generates a random number between 1 and 30, and I need to select the corresponding sprite based on this number. .sprit ...

javascripthtmlcss

Ways to determine if the top, right, bottom, and left of an element are set to "auto" in

Is there a way to determine if the top, right, bottom, or left values are set to auto or a specific value in Firefox? Unlike other browsers where $(element).css('top') may return auto, Firefox returns a specific value. ...

jquerycssfirefox

Generating a new division element with a unique identifier and subsequently making adjustments to it

Just starting out with HTML and JS here, so please excuse my lack of experience and not-so-great English. I have an ID on an HTML element that I want to add content to using a function. Additionally, I need to create another element (inside the first one) ...

javascripthtmlbootstrap-4frontende-commerce

The animation of the splash screen in Angular is quite jarring and lacks fluidity

I am experiencing some issues with my angular splash screen animation. It works perfectly when there is no activity in the background, but when I simulate a real-life application scenario, the animation becomes stuttered, choppy, or sometimes does not anim ...

htmlcssangular

align the bottom of nested columns using Bootstrap 4

Struggling to create a form using bootstrap 4, encountering an issue with aligning one column at the bottom: https://i.sstatic.net/y0BA7.png Here is the code snippet: <div class="col-md-3 m-2"> <div class="row"> < ...

cssbootstrap-4

How can I generate a box shadow design that is distinct from the original element?

Is there a way to make the box shadow on a checkbox input appear as a circle when hovered over, rather than taking the shape of the element itself? How can I achieve this effect? <input type="checkbox" class="check"> <label f ...

htmlcss

Intrigued by the connection between background and calc()?

Hello everyone! I'm currently involved in a project and have a quick question regarding the calc function. As we all know, it functions perfectly on all browsers... ========== great! ============= background-color:#dfdfdf; background-image:url(..) ...

cssinternet-explorer-11calcbackground-position

Issues with Twitter Bootstrap Rendering in Internet Explorer

Encountering significant challenges in making a Twitter Bootstrap site compatible with Internet Explorer. Visit for the site in question. Below are screenshots from Chrome and Internet Explorer along with the corresponding HTML code. The issue is with the ...

htmlcssinternet-explorertwitter-bootstrap

Incorporate a course within the conditional statement

Currently, I'm working on the development of an input site and one of my goals is to highlight empty fields. My plan is to check if a field is empty using an if statement and then apply a specific class that will serve this purpose. This is the JavaS ...

javascriptjqueryhtmlcss

Convert JSON objects within an array into HTML format

Is there a way to reformat an array of JSON objects that has the following structure? [{"amount":3,"name":"Coca-Cola"},{"amount":3,"name":"Rib Eye"}] The desired output in plain HTML text would be: 3 - Coca-Cola 3 - Rib Eye What is the best approach to ...

javascripthtmljsonnode.js

Achieve a full page layout with content and attach the footer to the bottom using flexbox in Tailwindcss and Nextjs

How can I use flex-grow to make the body section fill the screen and keep the nav fixed at the bottom? I'm having trouble figuring out which elements to apply these properties to. Can anyone provide guidance on which element should have these styles? ...

javascriptcssreactjsnext.jstailwind-css

Exploring the possibility of utilizing jQuery for limited incremental scrolling

Is there a way to control the scrolling on a website so that users transition through slides sequentially? Take a look at this example: No matter how much you scroll, the website transitions to the next or previous slide one at a time (unless a specific ...

jquerycssscroll

What are the specific pages on a three-page website that require canonical tags?

I seem to be facing an issue with Google Search Console. The error message states: Duplicate without user-selected canonical Currently, my site looks like the following. There are a total of 6 links. https://i.stack.imgur.com/s4uXF.png None of these l ...

htmlcanonical-link

Leveraging HTML and PHP for integrating date and mobile number functionalities

I am a beginner in HTML and PHP. I have encountered an issue where the data displayed shows as "0000-00-00" for dates and if the mobile number entered is less than 9 characters, it displays the same numbers repeatedly. However, when I enter 10 digits for t ...

javascriptphphtmlmysql

Ways to obtain the ID of the following element using jQuery

Here is some HTML code, and I am trying to retrieve the ID of the next element from a clicked element with the class name "coba" or to get the ID of an element with the class name "coba2." <div class="dropdown"> <label>Category</label> ...

javascriptjqueryhtml