https://stackoverflow.com/questions/19769302
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianIn modern browsers, this can be done using CSS3 transform:scale(1.5). However in older browsers or the mshta.exe that HTA uses it is more complex
You may be able to simply use <meta http-equiv="x-ua-compatible" content="ie=9"> (and perhaps also <!DOCTYPE html>) to make it act like IE9, thus interpreting the CSS3 and functioning properly.
If this doesn't work, however, you may be able to add support for pre-IE9 by using the following code
/* IE8+ */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand')";
/* IE6 and 7 */
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=1.5,
M12=0,
M21=0,
M22=1.5,
SizingMethod='auto expand');
/* "\9" is a fix to target only IE versions before IE9 */
margin-left: -64px\9;
margin-top: -9px\9;
On a side note you could clean up your code a good bit.
Since CSS selectors don't override the styles the element already has unless specified to do so, you don't have to repeat the same code in the class and the hover, you only have to include the parts that change
Also, instead of using the two classes button1 and button2, you can use a more generic button class and a second class for each element, i.e. red and blue
Implementing all of those changes you get a result that looks something like this
.button {
width:245px;
height:25px;
display:inline-block;
font-family: Tahoma;
font-size: 12px;
text-align:center;
text-decoration: none;
background-color: #E2E2E2;
border-top: 2px solid #F1F1F1;
border-right: 2px solid #969696;
border-bottom: 2px solid #969696;
border-left: 2px solid #F1F1F1;
}
.button:hover {
-webkit-transform:scale(1.5);
-moz-transform:scale(1.5);
-ms-transform:scale(1.5);
-o-transform:scale(1.5);
transform:scale(1.5);
/* IE8+ */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand')";
/* IE6 and 7 */
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=1.5,
M12=0,
M21=0,
M22=1.5,
SizingMethod='auto expand');
margin-left: -64px\9;
margin-top: -9px\9;
}
.blue {
color:blue;
}
.red {
color:red;
}
It was as I was afraid from the beginning... You may have to use a javascript function as a fallback for HTA if the above options didn't work like you said
This updated solution uses CSS3's scale if it can, but if not uses a custom javascript fallback that makes it seem like the same thing
// Function to see if the browser can support a CSS attribute
var supports = (function() {
var div = document.createElement('div'),
vendors = 'Khtml Ms O Moz Webkit'.split(' '),
len = vendors.length;
return function(prop) {
if ( prop in div.style ) return true;
prop = prop.replace(/^[a-z]/, function(val) {
return val.toUpperCase();
});
while(len--) {
if ( vendors[len] + prop in div.style ) {
return true;
}
}
return false;
};
})();
// Doesn't do anything if the browser supports transform
if (!supports('transform')) {
// Gets all the buttons
var buttons = document.getElementsByClassName('button');
for(var i = 0, j = buttons.length; i < j; i++) {
// "Scales" them when hovered
buttons[i].onmouseover = function() {
scale(this, 1.5);
}
}
}
function scale(obj, scaleFactor) {
// Makes a copy of the object, positions it absolutely (to not affect
// other elements), and scales it appropriately
var clone = obj.cloneNode(true);
clone.style.position = 'absolute';
clone.style.top = obj.offsetTop + "px";
clone.style.left = obj.offsetLeft + "px";
clone.style.fontSize = parseInt(document.defaultView.getComputedStyle(obj, null).fontSize) * scaleFactor + "px";
clone.style.width = obj.clientWidth * scaleFactor + "px";
clone.style.height = obj.clientHeight * scaleFactor + "px";
// Removes is when it stops being hovered
clone.onmouseleave = function() {
unscale(this);
}
document.body.appendChild(clone);
}
function unscale(obj) {
obj.parentNode.removeChild(obj);
}
On the positive side, creating a custom pseudo-scale function in pure javascript was an interesting thought. Hopefully the comments aid you enough in understanding it
Hopefully after all this work your problem is finally solved!
