Cross-browser min- and max-width on pure HTML + CSS
I have long wanted to share one interesting development - namely, the emulation of the min and max-width properties without using expression and similar things. Strapping may seem cumbersome, but its main advantage is that it works. Plus, these things can be easily implemented using a template with a single line of code.
The essence of the trick is simple:
‹Table› ‹tr› ‹td width = 1100› - maximum width
‹Div width = 900 /› - strut, minimum width
And just so, the width is not at the table , but at the cell . Thus, the table will not be wider than 1100 (in this case), but if it is already there, the scroller does not appear. Moreover, if the width of the working area is less than 900 - the scroller is already displayed.
Tested under different operating systems in browsers:
PS The semantics of this, of course, is lame, but I thought that it would be better to use one strapping, albeit cumbersome, than to produce an implementation under IE6 ... It's all at least unique. In the extreme case, you can simply remove the entire code under the optional comment and leave one div with min- and max-width outside. UPD: Added this version to the list.
PPS If it was already somewhere - I apologize, but I have never seen anything like it anywhere ...
The essence of the trick is simple:
‹Table› ‹tr› ‹td width = 1100› - maximum width
‹Div width = 900 /› - strut, minimum width
And just so, the width is not at the table , but at the cell . Thus, the table will not be wider than 1100 (in this case), but if it is already there, the scroller does not appear. Moreover, if the width of the working area is less than 900 - the scroller is already displayed.
- Example: test.dis.dj/stopper
- Cleaned version: test.dis.dj/stopper/clean.php
- UPD: Conditional comment version for IE6: test.dis.dj/stopper/conditional.php
Tested under different operating systems in browsers:
- Firefox: 3.5.2, 3.0.13, 2.0.0.16
- IE: 8, 8 in 7, 6 mode
- Opera: 10, 9.64, 9.2, 8.0
- Safari: 4.0, 3.4
- Chrome: 2.0.172.43
PS The semantics of this, of course, is lame, but I thought that it would be better to use one strapping, albeit cumbersome, than to produce an implementation under IE6 ... It's all at least unique. In the extreme case, you can simply remove the entire code under the optional comment and leave one div with min- and max-width outside. UPD: Added this version to the list.
PPS If it was already somewhere - I apologize, but I have never seen anything like it anywhere ...
')
Source: https://habr.com/ru/post/68917/
All Articles