IE8 "Save Target as ..." won't display for block elements

Any of those help Explicitly set the style for the visibility the way you want it: don't rely on hide() and show():

element.css('display', 'none'); equivalent of hide()
element.css('display', 'inline-block'); equivalent of show()
element.css('display', 'block'); What you want

I wish did fix the issue. From the sample stylesheet for HTML 4: button, textarea, input, and select default to inline-block, but they aren't generic containers so (presumably given you are talking about alternatives to div and span) don't suit your needs.
There are no generic containers that default to inline-block.

With these it helps for the effort GCyrillus, but my problem is that in the app that I'm writing the red blocks must be in fixed positions and are unraleted to the flow of the items. So it's very possible to happen that the space available between the red blocks won't match exactly with the height of the items (that can be variable as well). So what I need is something that can work independently from the height of the boxes.
After some more trials and errors, I managed to find out the problem just a few minutes ago actually! :)

<div class="column">
    <div class="spacer"></div>
    <div class="redBlock"></div>
    <div class="spacer"></div>
    <div class="redBlock"></div>
    <div class="spacer"></div>
    <div class="redBlock"></div>
    <div class="itemsList"><div class="item">Item 1</div><div class="item">Item 2</div><div class="item">Item 3</div><div class="item">Item 4</div><div class="item">Item 5</div><div class="item">Item 6</div><div class="item">Item 7</div><div class="item">Item 8</div><div class="item">Item 9</div><div class="item">Item 10</div></div>
</div>

.column {
    width: 201px;
    margin-left: 30px;
    background-color: #333;
}
.column:after {
    content: ".";
    visibility: hidden;
    height: 0;
    display: block;
    clear: both;
}


.spacer {
    width: 1px;
    height: 180px;
    float: left;
    clear: left;
    background-color: #00d;
}

.redBlock {
    width: 200px;
    height: 100px;
    float: left;
    clear: left;
    background-color: #d00;
}



.itemsList {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #ddd;
}
.item {
    display: inline-block;
    width: 200px;
    height: 50px;
    line-height: 50px;
    background-color: #0d0;
    text-align: center;
    margin-left: -1px;
}

will be helpful for those in need Your code works, but does some unnecessary things like:
the call to document.querySelector('*') when you already have the document object to which to attach events the call to document.getElementById(clickedId) when you already have the event.target to point to your clicked element setting the display style to none and then to block for your clicked element

let parent = document.querySelector("#all_options_parent") || document;

parent.addEventListener('click', (event) => {
    if (event.target.className === "option") {
        event.target.style.display = "block";

        let allOptions = parent.querySelectorAll(".option");

        for (let option of allOptions) {
            if (option != event.target) {
                option.style.display = "none";
            }
        }

    }
});