cross-browser | 易学教程

How do you override “-moz-user-select: none;” on a child element?

阅读更多关于 How do you override “-moz-user-select: none;” on a child element?

问题 The question CSS rule to disable text selection highlighting shows how to prevent text selection on an element. Once you have prevented selection, how can you then allow selection for a specific child element? For example, <div class="no-select"> <p>some text that cannot be selected</p> <p class="select">some text that can be selected</p> <p>some text that cannot be selected</p> </div> table.no-select { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz

Is there any difference between “margin: 0 auto;” and “margin: auto;”

阅读更多关于 Is there any difference between “margin: 0 auto;” and “margin: auto;”

问题 When we want page's main container align center, we usually use "margin: 0 auto;" , but when I use "margin:auto;" , behaviour are the same in some browser I have (Google Chrome, Firefox). 回答1: Yes. margin: 0 auto; Sets the element's left and right margins to auto , and the top and bottom margins to 0 . margin: auto; Sets all the margins to auto . You are probably getting the same behaviour due to your <body> being 100% height, hence the vertical auto margins have no effect. 来源： https:/

Is there any difference between “margin: 0 auto;” and “margin: auto;”

阅读更多关于 Is there any difference between “margin: 0 auto;” and “margin: auto;”

What are the best practices for cross-browser web sites? [closed]

阅读更多关于 What are the best practices for cross-browser web sites? [closed]

问题 Closed . This question is opinion-based. It is not currently accepting answers. Want to improve this question? Update the question so it can be answered with facts and citations by editing this post. Closed 2 years ago . (I'd like this to be the definitive community wiki. I seeded it from my own answer to this question.) Specify Everything A lot of cross-browser issues amount to this: you didn't specify something, and different browsers make different assumptions. Therefore: Declare a valid

Which HTML5 tags can I use without worrying about browser compatibility?

阅读更多关于 Which HTML5 tags can I use without worrying about browser compatibility?

问题 I am building a web app for use on PCs. What are the HTML5 tags to stay away from to prevent compatibility issues with Browsers like IE8 and above? Note: Most questions are 1-3 years old on this subject. 回答1: You asked what HTML5 tags to stay away from. Well Some of the tags from HTML5 from my knowledge were made for semantic reasons. like the following for example. <article> <section> <aside> <nav> <header> <footer> ..ect These are almost fine to work with, and just require a bit of CSS eg.

CSS flip-animation not working in Safari

阅读更多关于 CSS flip-animation not working in Safari

问题 Based on this excellent blogpost I implemented a flip-animation on a page of a web-application I am working on. At first I used the CSS-classes as presented in the top of the blogpost but unfortunately this doesn't work in IE10 so I started using the CSS-class that was proposed as a solution to get it working in IE10 presented at the end of the blogpost. I simplified the example tremendously for this post but my code looks like this HTML: <!DOCTYPE html> <html lang="en"> <head> <title>Welcome

how to reset (clear) file input

阅读更多关于 how to reset (clear) file input

问题 how can I reset file input in IE, I used the following and it worked in chrome and FF but not IE fileInputElement.value="" what's the alternative in IE ? 回答1: If fileInputElement is on its own in the form fileInputForm , you can do: window.fileInputForm.reset(); Otherwise for IE you'll have to replace the element with a clone: fileInputElement.parentNode.replaceChild( fileInputElement.cloneNode(true), fileInputElement ); 回答2: SOLUTION The following code worked for me with jQuery. It works in

-webkit-padding-start: 40px; What it should be for IE and Firefox?

阅读更多关于 -webkit-padding-start: 40px; What it should be for IE and Firefox?

问题 -webkit-padding-start: 40px; for Chrome What it is for IE and Firefox ? 回答1: For Firefox, the property name is -moz-padding-start. For IE, there is no counterpart (so far). You can achieve the same effect using widely supported CSS features at least in a simple scenario where the page as a whole is either in left-to-right or in right-to-left layout and writing direction. Using <html dir=ltr> or <html dir=rtl> , respectively, you can write your CSS code like this: [dir=ltr] .foo { padding-left

Getting the touched position in local coordinates of a transformed element

阅读更多关于 Getting the touched position in local coordinates of a transformed element

问题 I have an element which has been transformed with a matrix3d to give it perspective. It represents the screen of a handheld device. There's a background image showing the handheld device itself, and this is not transformed. The element which holds this is positioned, and the screen element is positioned absolutely within it, at left: 0; top: 0; , and then transformed, with an origin in the top-left of the container. This was the easiest way for me to line it up perfectly with the background

Change style scrollbar div for my site [duplicate]

阅读更多关于 Change style scrollbar div for my site [duplicate]

问题 This question already has answers here : CSS customized scroll bar in div (16 answers) Closed 4 years ago . I would like the style of the scrollbar of my div style was similar to the iPhone or the new finder osx Lion. It must be compatible with all browsers. Is it possible? 回答1: There are actually ways to change the looks of the scrollbars in webkit browsers, with CSS only http://css-tricks.com/9130-custom-scrollbars-in-webkit/ It is currently not possible to style scrollbars to have a