I understand that IDs are supposed to be unique in HTML documents. But a lot of HTML pages are sloppy and don\'t follow the rule. My question is: how do browsers handle CSS
Since this is something that breaks the rules it's not going to be something you can rely on. All you can do is test in each browser and it's handling might even change with the next version that comes out.
Handling it as you described seems sensible enough to me. There are probably more complications with how javascript handles this situation rather than css I would imagine.
I don't think there would be any unintended consequences. There are no problems with using the same class for many elements, why would ids be that different? I can't think of a single case where the basic rules of overriding styles wouldn't work as expected.